vscode之vue-cli安装和vue项目搭建

1.确认已安装好node，中文官网如下，未安装可按需下载。下载好之后，打开文 件直接一直下一步，根据需要更改安装位置即可：
http://nodejs.cn/download/
2.node安装好后，默认带有npm，查看安装是否成功
①win+R 打开命令窗口
②输入node -v查看版本

③输入npm -v查看版本

3.vscode中安装vue-cli
①打开vscode终端，输入以下全局安装命令,然后回车，等待安装完成。

npm install -g @vue/cli

注，npm安装速度较慢，可通过npm先安装好cnpm

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

然后再安装vue-cli

cnpm install -g @vue/cli

②安装完成后，输入命令,显示已安装的vue-cli版本号即安装成功

vue --version

4.利用vue-cli工具搭建项目
工具已经安装好了，现在利用工具来搭建项目，让.vue文件能被浏览器所认识，所以接下来就是配置项目环境的步骤了
①选择要搭建项目的文件位置，按住shift并点击右键，选择：在此处打开命令窗口，进入命令窗口页面
输入创建项目命令（xxx为项目名称），回车

vue create xxx

创建命令执行后，页面如下，可上下键进行选择：
default 表示默认配置
Manually 表示手动选择配置

②选择Manually后（空格键表示选择），然后回车，页面如下

此处为选择项目所需的功能（可根据需要选择）：
Babel 可使用es6/7
Router 路由
Vuex
CSS Pre-processors css处理器
Linter / Formatter 代码检查工具，将代码规范成统一的风格
③继续回车后，页面如下，此处默认选y（yes）

④继续回车，页面如下，默认选dart-sass
注意：此处选择node-sass很可能会在后面的下载过程中出现问题，此时只需要执行命令（cnpm i --save node-sass），因为node-sass会在npm的环境中下很可能安装不下来，但是使用cnpm可以安装成功

⑤选sass后，页面如下，选择标准的代码格式检查工具

⑥回车后进入下一步，Lint on save（保存后检查代码规范），Lint and fix on commit（自动修复代码格式功能）

⑦继续回车，到这一步，所有的配置信息都配置好了，将配置文件放在默认的独立文件里面（In package.json表示将配置文件放在package.json里面）

⑧继续回车，出现如下页面，表示询问你是否希望下次还继续使用以上的所有配置（可根据需要选择）

⑨继续回车，进入自动安装工具包的页面

出现如下页面表示安装完成

在vscode中打开创建好的文件

打开package.json，scripts脚本中为启动项目的方式
npm run serve -----启动项目的命令
（可在脚本中将serve改为start 启动项目时只需输入 npm start即可）
npm run lint -----自动修复代码格式
npm run build ------生产环境构建

vscode中选择创建好的文件----右击----在终端中打开----输入npm run serve，出现如下页面，说明默认启动了一台服务器，端口为8080

在浏览器打开，页面如下，就说明成功了

最后是个小彩蛋啦。。。
有的时候可能因为各种各样的原因安装不上vue-cli,而你又需要创建项目，这时候就可以选择这个快速的方法啦
①让已经安装好脚手架的人帮你创建好一个空项目，然后你自己新建一个文件夹，把别人创建好的项目中除了node_modules以外的其他文件都复制到你自己新建的文件夹中
②在新建的文件夹中shift+右击打开命令窗口，输入cnpm i，回车后就会把所有依赖的文件都下载一遍，然后你的项目就可以正常使用啦