VS code创建Vue项目 方法1：create+项目

目录

​​​​1、配置环境：node.js

2、安装vscode

3.安装配置脚手架vue-cli

启动项目

---

​​​​1、配置环境：node.js

参考Vue开发环境安装_Siobhan. 明鑫的博客-CSDN博客

查看node.js是否安装成功：打开cmd，输入ndoe -v 和 npm -v 如果显示版本信息，则说明安装成功。

2、安装vscode

参考文章：

 VSCode 安装使用教程 环境安装配置 保姆级教程_Siobhan. 明鑫的博客-CSDN博客

此时在vscode中打开项目，验证是否成功：

问题解决：

cnpm在vscode中无法验证成功，需要 采用如下方法解决：

错误信息：

cnpm : 无法加载文件 D:\Software\nodejs\node_global\cnpm.ps1，因为在
此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/f 
wlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ cnpm -v
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityExcep 
    tion
    + FullyQualifiedErrorId : UnauthorizedAccess

cnpm : 无法加载文件 D:\Software\nodejs\node_global\cnpm.ps1，因为在
此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/f 
wlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ cnpm -v
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityExcep     
    tion
    + FullyQualifiedErrorId : UnauthorizedAccess

解决办法：

1.以管理员的身份打开Power Shell

2.输入下列代码

set-ExecutionPolicy RemoteSigned

回复 Y 即可

再次测试：

3.安装配置脚手架vue-cli

cmd下：

正确的打开方式是，用管理员身份运行！

Win + s 搜索 “命令提示符”，右键以管理员身份运行。

两种方式，一种cnpm安装，一种为npm安装.

npm默认安装版本为2.9.6，脚手架2.x版本，而cnpm则是最新的，我们最终采用cnpm来使用，可以在构建2.x版本的基础上还可以构建3.x版本！

①cnpm安装脚手架

1、cnpm install vue -g

2、cnpm i @vue/cli -g

②npm安装脚手架 

1. 安装vue.js 

npm install vue -g

其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。 

2. 安装webpack模板

npm install webpack -g

此外，在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

npm install webpack-cli -g

输入 webpack -v，能输出版本号就说明都安装好了。

3. 安装脚手架vue-cli

npm install vue-cli -g

输入vue --version或者 vue -V，能输出版本号就说明安装好了。 

4. 安装vue-router

npm install vue-router -g

都弄好了我们打开我们自定义的全局模块目录下的node_modules文件夹，会发现安装的模块都统一在这里。 

创建项目——vue create 项目名

~~~~~~~~~~~ CMD 下

Vs code下：

 

 此时创建成功

 启动项目

(1) 打开项目里面的package.json，在vscode终端执行start中的命令npm run dev或者npm run serve，启动成功后会出现访问地址

2) 根据提示，访问http://localhost:8080，会访问到如下界面。至此，VS Code创建Vue.js项目已经完成。