VSCode配置Vue项目

1、下载安装VSCode，直接到官网下载

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

下载一个.zip压缩包，解压即可用

2、汉化

按快捷键Ctrl+shift+P打开命令面板，选择

安装中文简体

安装完后重启即可

3、安装Vue插件vetur

选择vetur安装

4、文件——首选项——设置

5、安装ESLint插件

6、配置

7、下载安装node.js

下载地址：http://nodejs.cn/download/

安装直接next

8、cmd打开命令行工具

9、更改配置和缓存目录（此步可跳过）

为方便管理，且减轻系统盘压力（默认会把配置和缓存放到个人文档AppData下），将nodejs的node_global和node_cache转移至nodejs安装目录下。

新建两个文件夹

执行语句

10、安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败

为方便使用，所以优先使用淘宝的镜像服务器对依赖包module进行安装，因此首先安装cnpm（国内镜像包可能会有收录延时，找不到最新的包，不过基本没什么影响）

cnpm安装之后，不会自动添加环境变量配置，此时执行cnpm命令会提示“'cnpm' 不是内部或外部命令，也不是可运行的程序或批处理文件”；需要将nodejs的配置添加到环境变量PATH中

11、安装vue-cli

vue-cli是一套用来搭建vue项目的脚手架，能极大程度的方便创建一个全新的vue项目，只需要输入几个命令就可以了

npm install -g vue-cli    或    cnpm install -g vue-cli

12、使用vue命令，快速创建vue项目

13、安装项目依赖项cnpm，并运行项目（若上一步选择了npm依赖，则此步跳过）

使用cnpm install 命令，直接安装依赖项，

安装完成后，在项目目录下，会出现一个node_modules依赖包文件夹

执行“cnpm run dev”命令，就会自动打包，生成项目，在浏览器中输入“http://localhost:8080”查看

14、 打开VSCode管理工具，选择左上角“文件”---“打开文件夹”，弹框选择刚刚创建的Vue项目文件夹，就会将项目加载到工作区，可以很方便的查看和修改项目文件