配置vue开发环境

标题第一步：安装node.js

1、下载地址为：https://nodejs.org/en/
2、安装node.js：https://www.runoob.com/nodejs/nodejs-install-setup.html
3、安装完之后查看版本号：node -v
　　
至此，node.js安装完毕。

标题第二步：配置淘宝镜像

1 、配置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、 设置环境变量
找到cnpm.cmd所在目录配置到环境变量path
3 、验证是否安装成功
cnpm -v

标题第三步：安装webpack

1、安装webpack
cnpm install webpack -g
2、查看webpack版本
webpack -v

标题第四步：安装插件 https://marketplace.visualstudio.com/search?target=VSCode&category=All%20categories&sortBy=Installs

需要安装如下插件：
插件 功能
Vetur 高亮.vue文件，附带有格式化功能，配合Eslint插件对代码进行格式化检查
Eslint 检查你的js、html、css代码，确保它们符合规范，并且代码风格保持一致性，强制性的规则
Debugger for Chrome 代码调试
koroFileHeader 在vscode中用于生成文件头部注释和函数注释的插件
router 路由

标题第五步：配置首选项（没用到）

文件->首选项->设置，在settings.json下的【工作区设置】中添加以下配置：
{ …
“editor.formatOnType”: true,
“editor.formatOnSave”: true, //保存时自动格式化
…
“fileheader.customMade”: { //生成头部注释配置
“Description”: “file information”,
“Author”: “will”,
“Date”: “Do not edit”, // 文件创建时间(不变)
“LastEditors”: “will”, // 文件最后编辑者
“LastEditTime”: “Do not edit” // 文件最后编辑时间
},
“vetur.format.defaultFormatter.html”: “js-beautify-html”, //统一代码风格
“vetur.format.defaultFormatterOptions”: {
“js-beautify-html”: {
“wrap_attributes”: “auto”
},
“prettyhtml”: {
“printWidth”: 100,
“singleQuote”: false,
“wrapAttributes”: false,
“sortAttributes”: false
}

标题第六步：安装vue/cli

1、安装Vue脚手架
cnpm install -g @vue/cli
2、查看vue版本
vue -v