VSCode和VUE的初始安装及简单使用入门

（版本1.0）

npm run dev 运行工程

• PS F:\SDN\VIMS–前端\vue> cnpm install
• PS F:\SDN\VIMS–前端\vue> cnpm rebuild node-sass
• PS F:\SDN\VIMS–前端\vue> cnpm run dev 若提示cookie失败，则输入：
• PS F:\SDN\VIMS–前端\vue> cnpm install vue-cookies
• PS F:\SDN\VIMS–前端\vue> cnpm run dev
• Vue的组件是.vue或.wxml等文件，无法被浏览器解析，需要被翻译和打包为.js文件
• 1.输入cnpm install webpack –g进行安装打包 。
• cnpm install vue-cli –g 用来生成vue模板的工具

（版本2.0）

一：安装Node.js

1. 在Node.js官网> https://nodejs.org/en/download/下载安装包。
2. 下载后进行安装。
3. 打开命令行，输入node -v可以查看到版本号。输入npm –v可看到npm版本号。新版的Node.js已自带npm（类似.net中的nuget包管理器），安装Node.js时会一起安装。（将来要更新npm可用这个命令npm intall npm@latest -g）
4. 配置环境变量（这里就会自动配置好）。
5. 命令行中输入node， 再输入console.log(“hello”); 用来验证是否安装成功。
6. 配置npm的全局模块的存放路径和缓存路径，在node.js的安装目录下新建node-cache和node_global两个文件夹，然后命令行输入：
   npm config set prefix “c:\Program Files\nodejs\node_global”
   npm config set cache “c:\Program Files\nodejs\node_cache”
   将来用npm install xxx -g 安装以后的模块就在这两个文件夹里。
7. 配置npm的环境变量：系统变量path中新增一个变量：
   C:\Program Files\nodejs\node_global\node_modules，（node安装在哪就写哪），然后在用户变量中修改变量为C:\Program Files\nodejs\node_global，最后就可以删掉C:\Users\xlz\AppData\Roaming下的npm目录了。

二：安装cnpm

输入命令：cnpm install， 完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到cnpm文件夹和它的文件了。

三：安装webpack（js应用程序的静态模块打包器module bundler）

输入 cnpm install webpack -g 进行安装，如何报错则去掉-g。

四：安装vue-cli（用来生成vue模板的工具）

输入cnpm install vue-cli -g 进行安装。

五：新建一个Vue项目测试一下

在某个盘新建一个文件夹，命令行输入vue init webpack xxx（项目名）进行创建，按下enter键进行多次确认，最后一步选No.
cd xxx（项目名）,即进入所创建的项目中。
输入 cnpm install下载安装项目的依赖。
输入cnpm run dev ，然后在浏览器通过http://localhost:8080地址访问。

六：安装VSCode（官网可下载）

安装vetur插件（vue语法高亮），eslint插件（智能错误监测），安装open in broswer插件（可使用alt + b来使用浏览器打开当前html文件）。

七：代码格式化

打开项目根目录中的.eslintrc.js文件，在rules中添加"space-before-function-paren": [“error”, “never”]，目的是为了让eslint检查在函数名和括号之间不能有空格。
安装vs code扩展工具：vetur、Prettier-Code formatter和ESLint。
vs code 用户设置：文件–首选项–设置：
在打开的窗口中的“用户设置”中加入下面内容：

// prettier:每行在这个字符数内整合代码，如果你的屏幕较宽分辨率较高可以适当加大
"prettier.printWidth": 120,
// prettier:是否在每行末尾加上分号
"prettier.semi": false,
// prettier:如果为true，将使用单行否则使用双引号
"prettier.singleQuote": true,
// vetur:对html的内容使用js-beautify-html
"vetur.format.defaultFormatter.html"