vscode 搭建vue环境

1、安装vscode:

• 官网地址：https://code.visualstudio.com/

• 选择自己要安装的文件夹，然后一路next就行了

• 安装前端开发必要插件：https://blog.csdn.net/yujing1314/article/details/90340647

2、安装nodejs,建议选择长期维护版

官网下载即可：https://nodejs.org/zh-cn/

• 选择自己要安装的文件夹，然后一路next就行了

• 安装后打开cmd命令窗口，记得以管理员身份运行

• 输入node -v，npm -v
  

• 显示node版本号及npm版本号代表安装成功

3、替换npm源

• 替换npm源这样会提高后面的下载速度（还有其他的源，这边以淘宝源为例）

• $ npm config set registry https://registry.npm.taobao.org         // 设置源
  $ npm install gulp less --save-dev                                // 保存配置
  

• 查看配置是否成功

• $ npm config list
  

• 将npm替换为cnpm(此步奏可以省略，cnpm是阿里定制的，功能与npm类似)

• $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  

4、配置cmd在vscode内也为管理员运行

• 以管理员身份运行PowerShell,cmd不行
• 执行：get-ExecutionPolicy，如果系统回复回复Restricted，表示状态是禁止的
• 执行：set-ExecutionPolicy RemoteSigned
• 全部同意，选择 Y 或者 A

5、打开vscode,安装vue

• 创建一个文件夹，添加为工作区
  

• 在工作区内创建一个文件夹

• 选中文件夹，选择终端
  

• 下载安装vue，安装了cnpm的同学可以使用cnpm

• npm install -g @vue/cli
  

• 安装完毕后使用vue --version检查是否安装完毕

• 遇到错误可以去C:\Users\Administrator\AppData\Roaming\npm\node_modules路径下删除@vue，清理缓存重新开始

• npm cache clean --force                            // 清理缓存
  

• 如果是使用 npm install -g @vue/cli这个命令行，出错的同学可以使用 npm install @vue/cli -g

• ps：只要没出现 npm err 那么就是成功了，或者使用vue --version

6、创建一个项目

• 使用vue create <项目名> 创建，在命令行中输入

• vue create hello-world
  

• PS：选择带有Babel + ESLint设置的选项

附上官网教程：https://cli.vuejs.org/zh/guide/prototyping.html