当前位置: 首页 > news >正文

在VSCode上创建Vue项目详细教程

1.前期环境准备

搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备Node.js环境,就像Java开发要依赖JDK环境一样。

1.1 Node.js环境配置

1)具体安装步骤操作即可:

npm 安装教程_如何安装npm-CSDN博客文章浏览阅读836次。本文主要在Window环境下安装,点击下载,并安装到没有中文的目录下。安装时候一直点下一步即可完成安装。3、配置npm淘宝镜像,并查看是否配置成功。# 配置npm淘宝镜像。2、查看是否安装成功。# 查看是否配置成功。_如何安装npmhttps://blog.csdn.net/qq_39512532/article/details/1281128492)配置全局 npm 包的安装路径,解决默认路径可能带来的权限问题和提高安全性:(其路径改为你Nodejs安装的路径即可)

C:\>npm config set prefix "D:\softFile\Node.js"C:\>npm config get prefix
D:\softFile\Node.js

3)如果后续下载觉得网速慢,可改为淘宝镜像:

npm config set registry https://registry.npm.taobao.org

 1.2 VSCode安装相关插件

超实用的VS Code插件推荐_vscode好用的开发插件-CSDN博客文章浏览阅读622次,点赞17次,收藏18次。VS Code代码编辑器中提供了丰富的插件,满足不同开发者的需求。这里为大家推荐一些强大的VS Code插件,帮助你打造一个个性化的开发环境,让你的编码体验更加舒适和高效。打开扩展模块,输入安装包名称,回车进行搜索,点击install即可无脑安装。_vscode好用的开发插件https://blog.csdn.net/qq_39512532/article/details/140097440

1.3 安装Vue-cli

npm install -g @vue/cli

安装结束后,通过下面命令检查Vue是否安装成功:

vue --version

2.工程化Vue项目创建

创建Vue项目有两种方式:通过命令行创建或通过UI界面创建。

2.1 通过命令行创建Vue项目

vue create vue-project01

2.2 通过UI界面创建Vue项目

1)在VS code 终端输入vue ui

2)会弹出图形化界面。若没弹出则输入终端中url进行访问(http://localhost:8000/project/select)。

3)创建新项目

4)进行配置选择,可以根据需要自行选择


5)选择Vue版本与语法规范

6)不保存预设

7)创建完成


2.3 Vue项目的目录结构

2.4 启动Vue项目的两种方式

2.4.1 命令行启动

npm run serve

2.4.2 图形化页面启动

启动成功

首页展示的其实就是项目中默认的APP.vue组件。

2.5 更改 Vue项目的端口配置

3. 问题解决

问题:输入vue ui报错:解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本:

PS C:\Users\hsj> vue ui
vue : 无法加载文件 D:\softFile\Node.js\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅
https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue ui
+ ~~~+ CategoryInfo          : SecurityError: (:) [],PSSecurityException+ FullyQualifiedErrorId : UnauthorizedAccess


解决方案
1)以管理员的身份运行PowerShell

2)执行:get-ExecutionPolicy,如果回复Restricted,表示状态是禁止的

3)执行:set-ExecutionPolicy RemoteSigned
选择Y
4)执行:get-ExecutionPolicy进行查看,是否已修改为RemoteSigned

相关文章:

在VSCode上创建Vue项目详细教程

1.前期环境准备 搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备Node.js环境,就像Java开发要依赖JDK环境一样。 1.1 Node.js环境配置 1)具体安装步骤操作即可: npm 安装教程_如何安装npm-CSDN博客文章浏览阅读836次。本文主要在Win…...

Go语言入门之流程控制简述

Go语言入门之流程控制简述 1.if语句 if语句和其他语言一样,只不过go语言的if不需要用括号包裹 if 语句的分支代码块的左大括号与 if 关键字在同一行上,这是 go 代码风格的统一要求 简单实例: func main() {// 猜数字a : 2if a > 0 {if a…...

接口测试框架基于模板自动生成测试用例!

引言 在接口自动化测试中,生成高质量、易维护的测试用例是一个重要挑战。基于模板自动生成测试用例,可以有效减少手工编写测试用例的工作量,提高测试的效率和准确性。 自动生成测试用例的原理 为了实现测试用例数据和测试用例代码的解耦&a…...

C++ STL stable_sort用法

一&#xff1a;功能 对区间内元素进行排序&#xff0c;保证相等元素的顺序&#xff08;稳定排序&#xff09; 二&#xff1a;用法 #include <iostream>struct Record {std::string label;int rank; };int main() {std::vector<Record> data {{"q", 1},…...

YOLO v8进行目标检测的遇到的bug小结

OSError: [WinError 1455] 页面文件太小&#xff0c;无法完成操作。 我的python环境是放在C盘的&#xff1a; 在“我的电脑”点击鼠标右键&#xff0c;打开“属性”点击高级系统设置点击“设置”找到“高级”点击“更改”分配“虚拟内存”&#xff08;这里需要重启电脑才能生…...

FastAPI -- 第二弹(响应模型、状态码、路由APIRouter、后台任务BackgroundTasks)

响应模型 添加响应模型 from typing import Anyfrom fastapi import FastAPI from pydantic import BaseModel, EmailStrapp FastAPI()class UserIn(BaseModel):username: strpassword: stremail: EmailStrfull_name: str | None Noneclass UserOut(BaseModel):username: s…...

案例 | 人大金仓助力山西政务服务核心业务系统实现全栈国产化升级改造

近日&#xff0c;人大金仓支撑山西涉企政策服务平台、政务服务热线联动平台、政务网、办件中心等近30个政务核心系统完成全栈国产化升级改造&#xff0c;推进全省通办、跨省通办、综合业务受理、智能审批、一件事一次办等业务的数字化办结进程&#xff0c;为我国数字政务服务提…...

如何用python写接口

如何用python写接口&#xff1f;具体步骤如下&#xff1a;  1、实例化server 2、装饰器下面的函数变为一个接口 3、启动服务 开发工具和流程&#xff1a; python库&#xff1a;flask 》实例化server&#xff1a;server flask.Flask(__name__) 》server.route(/index,met…...

轻量级可扩展易航网址引导系统源码V2.45

由于现在网站行业的不稳定&#xff0c;导致很地址频繁更换&#xff0c;不仅是网站&#xff0c;联系QQ&#xff0c;加群链接等需要更换时&#xff0c;好不容易发展的客户会因为找不到您新的网站地址而流失&#xff0c;有了引导页以后就可以安心地宣传无需担心客户丢失的问题。 …...

解决ESLint和Prettier冲突的问题

在配置了ESLint的项目中使用Prettier进行格式化可能会出现冲突&#xff0c;不如Prettier配置了使用双引号&#xff0c;ESLint配置了单引号&#xff0c;当然可以一个一个改成一样的配置&#xff0c;但是比较麻烦。我发现可以直接使用ESLint的规则进行格式化。在VSCode配置过程如…...

C判断一个点在三角形上

背景 鼠标操作时&#xff0c;经常要判断是否命中显示控件&#xff0c;特开发此算法快速判断。 原理 三角形三等分点定理是指在任意三角形ABC中&#xff0c;可以找到三个点D、E和F&#xff0c;使得线段AD、BE和CF均等分三角形ABC。 这意味着三个等分点分别位于三个边界上&…...

物业系统自主研发接口测试框架

1、自主研发框架整体设计 1.1、什么是测试框架? 在了解什么是自动化测试框架之前&#xff0c;先了解一下什么叫框架?框架是整个或部分系统的可重用设计&#xff0c;表现为一组抽象构件及构件实例间交互的方法;另一种定义认为&#xff0c;框架是可被应用开发者定制的应用骨架…...

手机和电脑通过TCP传输

一.工具 手机端&#xff1a;网络调试精灵 电脑端&#xff1a;野火网络调试助手 在开始通信之前&#xff0c;千万要查看一下电脑的防火墙是否关闭&#xff0c;否则可能会无法通信 在开始通信之前&#xff0c;千万要查看一下电脑的防火墙是否关闭&#xff0c;否则可能会无法通信…...

Git 在commit后,撤销commit

1. 撤销已经add&#xff0c;但是没有commit的问题 git reset HEAD 2. 撤销已经commit&#xff0c;但是没有push到远端的文件&#xff08;仅撤销commit 保留add操作&#xff09; 撤销上一次的提交 git reset --soft HEAD^windows 系统使用提示 more&#xff0c;需要多加一个…...

多模态大模型 - MM1

1. 摘要 本文主要通过分析模型结构和数据选择讨论如何构建一个好的多模态大模型&#xff08;MLLM&#xff09;&#xff0c;并同时提出了MM1模型&#xff0c;包括30B dense版本和64B的MoE版本。 具体贡献&#xff1a; 模型层面&#xff1a;影响效果的重要性排序为&#xff1a;…...

FPGA设计之跨时钟域(CDC)设计篇(2)----如何科学地设计复位信号?

1、复位是干嘛的? 时钟信号和复位信号应该是一个数字系统最重要和最常用的两个信号了。时钟的重要性大家都懂,没有时钟整个系统就无法同步,自然也就谈不上运行了。那么复位(reset)到底是干嘛的? 所有的数字系统在上电的时候都会进行复位,这样才能确保该系统的初始运行状…...

GPS北斗标准时钟同步服务器结构是什么?安徽京准

GPS北斗标准时钟同步服务器结构是什么&#xff1f;安徽京准 GPS北斗标准时钟同步服务器结构是什么&#xff1f;安徽京准 电厂时钟同步系统组成及配置 随着计算机和网络通信技术的飞速发展&#xff0c;火电厂热工自动化系统数字化、网络化的时代已经到来。一方面它为控制和信息系…...

9.5 栅格图层符号化多波段彩色渲染

文章目录 前言多波段彩色渲染QGis设置为多波段彩色二次开发代码实现多波段彩色 总结 前言 介绍栅格图层数据渲染之多波段彩色渲染说明&#xff1a;文章中的示例代码均来自开源项目qgis_cpp_api_apps 多波段彩色渲染 以“3420C_2010_327_RGB_LATLNG.tif”数据为例&#xff0c…...

力扣第九题

回文数 提示&#xff1a; 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 代码展示&#…...

鞭炮插画:成都亚恒丰创教育科技有限公司

鞭炮插画&#xff1a;年味里的绚烂记忆 在岁末年初的温柔时光里&#xff0c;总有一抹色彩&#xff0c;能瞬间唤醒沉睡的年味——那便是鞭炮插画中跃动的红与金&#xff0c;成都亚恒丰创教育科技有限公司 它们不仅仅是纸与墨的交织&#xff0c;更是情感与记忆的桥梁&#xff0c…...

如何永久保存微信聊天记录并挖掘数据价值?WeChatMsg全攻略

如何永久保存微信聊天记录并挖掘数据价值&#xff1f;WeChatMsg全攻略 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/W…...

Go语言的Web框架:从Gin到Echo

Go语言的Web框架&#xff1a;从Gin到Echo 1. 引言 Web框架是现代Web应用开发的重要工具&#xff0c;它提供了路由、中间件、参数处理等功能&#xff0c;大大简化了Web应用的开发过程。Go语言作为一种高效、简洁的编程语言&#xff0c;拥有丰富的Web框架生态。本文将介绍Go语言…...

Math.js 使用教程

Math.js 是 JavaScript 生态里最强大、通用的数学计算库&#xff0c;核心解决原生 Math 功能弱、精度差、无表达式解析、不支持复数/矩阵/单位等痛点。一、核心定位与优势 兼容浏览器 & Node.js&#xff0c;无外部依赖支持&#xff1a;高精度数、复数、分数、单位、矩阵、符…...

如何用 AI Agent Harness Engineering 重构企业生产流程:一套可复制的落地方法论

如何用AI Agent Harness Engineering重构企业生产流程&#xff1a;一套从0到亿可复制的落地方案书关键词&#xff1a;AI Agent、Harness Engineering、企业生产流程重构、智能协作体、低代码Agent编排、端到端流程自动化、ROI可验证落地摘要&#xff1a;当ChatGPT引爆通用人工智…...

家庭物联网中枢:OpenClaw+Phi-3-vision实现智能家居视觉控制

家庭物联网中枢&#xff1a;OpenClawPhi-3-vision实现智能家居视觉控制 1. 为什么需要本地化的智能家居方案 去年装修新房时&#xff0c;我面临一个两难选择&#xff1a;要么使用成熟的云端智能家居平台&#xff0c;牺牲部分隐私&#xff1b;要么完全手动控制&#xff0c;失去…...

表格居中无效的5大原因及解决方案

表格样式居中无效的常见原因单元格内文本对齐方式未设置 表格整体居中和单元格内文本居中是两个独立设置。即使表格整体居中&#xff0c;单元格内文本可能仍默认左对齐。需在单元格属性或样式表中明确设置文本居中。CSS样式冲突 外部CSS文件或内联样式可能覆盖了表格的居中设置…...

MinIO版本升级与主备同步实战:从数据迁移到高可用部署

1. MinIO版本升级的核心挑战 当你准备将MinIO从老版本升级到新版本时&#xff0c;最头疼的问题就是数据兼容性。我去年帮客户升级一个生产环境时&#xff0c;就遇到过新版本直接启动后报"Invalid arguments specified"的错误。这是因为MinIO的存储格式在不同大版本间…...

SNIPER深度解析:为什么它能在COCO数据集上实现47.8mAP的惊人效果

SNIPER深度解析&#xff1a;为什么它能在COCO数据集上实现47.8mAP的惊人效果 【免费下载链接】SNIPER SNIPER / AutoFocus is an efficient multi-scale object detection training / inference algorithm 项目地址: https://gitcode.com/gh_mirrors/sn/SNIPER SNIPER&a…...

Obsidian 完全指南:从入门到精通

一、简介 Obsidian 是一款基于 Markdown 的本地知识管理工具,以双向链接和插件生态著称。 什么是 Obsidian Obsidian 是一款基于本地 Markdown 文件的知识管理和笔记工具。所有笔记以纯文本 .md 文件存储在本地,数据完全由用户掌控,无需依赖云端服务。也可以平替Typora。 …...

StructBERT中文相似度模型实操手册:如何扩展为‘单句vs百句’本地向量检索服务

StructBERT中文相似度模型实操手册&#xff1a;如何扩展为‘单句vs百句’本地向量检索服务 1. 项目简介与核心价值 StructBERT中文相似度模型是基于阿里达摩院开源的大规模预训练模型开发的本地化语义匹配工具。这个工具能够将中文句子转化为高质量的特征向量&#xff0c;通过…...