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

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

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

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

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

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

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

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

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

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

七：代码格式化

1. 打开项目根目录中的.eslintrc.js文件，在rules中添加"space-before-function-paren": ["error", "never"]，目的是为了让eslint检查在函数名和括号之间不能有空格。
2. 安装vs code扩展工具：vetur、Prettier-Code formatter和ESLint。
3. vs code 用户设置：文件--首选项--设置：
   在打开的窗口中的“用户设置”中加入下面内容：
   { // prettier:每行在这个字符数内整合代码，如果你的屏幕较宽分辨率较高可以适当加大 "prettier.printWidth": 120, // prettier:是否在每行末尾加上分号 "prettier.semi": false, // prettier:如果为true，将使用单行否则使用双引号 "prettier.singleQuote": true, // vetur:对html的内容使用js-beautify-html "vetur.format.defaultFormatter.html": "js-beautify-html" }
4. 按下Alt+Shift+F ，代码便可格式化了。

八：自动生成代码块

1. 在vs code中，使用快捷键Ctrl+Shift+P打开搜索栏-->输入snippet-->选择首选项（首选项：配置用户代码片段）
2. 输入vue-->选择vue.json（Vue）
3. 输入需要生成的vue组件内容
   { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", "export default {", " data() {", " return {\n", " }", " },", " methods: {\n", " },", " components: {\n", " }", "}", "</script>\n", "<style>\n", "</style>", "$2" ], "description": "创建一个自定义的vue组件代码块" } }
4. 之后在创建vue文件是，输入vue然后tab一下，基本结构就出来了。

九：常用插件推荐

1. Auto Close Tag：自动闭合Html/XML标签；
2. Auto Rename Tag：自动完成另一侧标签的同步修改；
3. Beautify：格式化代码，支持自定义格式化代码规则；
4. Bracket Pair Colorizer：给括号加上不同的颜色，区分不同的区块；
5. Debugger for Chrome：映射vscode上的断点到chrome上，方便调试；
6. ESlint：js语法纠错，配置较为复杂；
7. GitLens：方便查看git日志；
8. HTML CSS Support：智能提示css类型以及id；
9. Html Snippet ：智能提示Html标签，以及标签含义；
10. JavaScript(es6) code snippet ：es6语法智能提示，以及快速输入；
11. jQuery Code Snippet：jQuery 代码智能提示；
12. Material Icon Theme 和 vscode-icons：最好的vscode主题；
13. open in browser：支持快捷键在浏览器中打开html文件；
14. Path Intellisense：自动提示文件路径，支持各种快速引入文件；
15. Vetur：Vue多功能集成插件。

十：目录简介

1. build 里面是一些操作文件，使用npm run *其实执行的就是这里的文件；
2. config 配置文件，执行文件需要的配置信息；
3. src 资源文件，所有组件和所用图片都放在这里；
   3.1 assert 资源文件夹，放图片之类的资源；
   3.2 components 组件文件夹，写的所有组件都放在这个文件夹下；
   3.3 router 路由文件夹，这个决定了页面的跳转规则；
   3.4 App.vue 应用组件，所有自己写的组件都是在这个组件上运行；
   3.5 main.js webpack的入口文件，webpack四大特性：entry入口、output输出、Loader加载器、plugins插件
4. node_modules 放所有依赖的模块，往往不上传此文件（文件多且大）；
5. dist文件，打包后的成品页面：
   5.1 index.html 就是单页应用的页面；
   5.2 static

十一：项目打包

打包命令：npm run build ，打包完成后会在根目录下生成一个dist文件夹，这个就是最后的成品页面，需要将打包的路径改为相对路径，这个根据build命令一路跟踪，到config\index.js文件中build对象，将assetsPublicPath中的“/”改为“./”即可，并在build\build.js中将这两句的提示信息删掉即可；

十二：Beautify插件配置*.vue

1. 点击设置，找到beautify.language复制这一段到用户区，并在html一栏加上vue即可。
2. 文件-->设置-->键盘快捷键设置，打开编辑keybindings.json，输入
   { "key": "alt+shift+e",//自己定键位 "command": "HookyQR.beautify", "when": "editorFocus" }

十三：ESLint（用于审查代码规范）的使用配置相关

1. 在初始化项目时选择使用ESLint管理代码
   Use ESLint to lint your code? (Y/n)
2. 对文件的解释：
   2.1 .editorconfig：主要用于配置IDE；
   root = true # 对所有文件有效 //[*js]只对js文件有效 [*] #设置编码格式 charset = utf-8 #缩进类型 可选space和tab indent_style = space #缩进数量可选整数值2 or 4,或者tab indent_size = 2 #换行符的格式 end_of_line = lf # 是否在文件的最后插入一个空行 可选true和false insert_final_newline = true # 是否删除行尾的空格 可选择true和false trim_trailing_whitespace = true

2.2 .eslintignore：放置需要ESLint忽略的文件，只对.js文件有效；
/build/ /config/ /dist/ /src/utils/ /src/router/*.js

2.3 .eslintrc.js：用来配置ESLint的检查规则；
module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析 parser: 'babel-eslint', //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式 parserOptions: { sourceType: 'module' }, //此项指定环境的全局变量，下面的配置指定为浏览器环境 env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错 extends: 'standard', // required to lint *.vue files // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的 plugins: [ 'html' ], // add your custom rules here // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin- // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致 // "off" -> 0 关闭规则 // "warn" -> 1 开启警告规则 //"error" -> 2 开启错误规则 // 了解了上面这些，下面这些代码相信也看的明白了 rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // js语句结尾必须使用分号 'semi': ['off', 'always'], // 三等号 'eqeqeq': 0, // 强制在注释中 // 或 /* 使用一致的空格 'spaced-comment': 0, // 关键字后面使用一致的空格 'keyword-spacing': 0, // 强制在 function的左括号之前使用一致的空格 'space-before-function-paren': 0, // 引号类型 "quotes": [0, "single"], // 禁止出现未使用过的变量 // 'no-unused-vars': 0, // 要求或禁止末尾逗号 'comma-dangle': 0 } }

1. 如何在老项目中加入ESLint：
   3.1 在目录中添加.editorconfig、.eslintrc.js、.eslintignore这三个文件；
   3.2 在package.json的”devDependencies”中加入ESlint所需要的包
   "babel-eslint": "^7.1.1", "eslint": "^3.19.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-html": "^3.0.0", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1",

3.3 在bulid/webpack.base.conf.js文件中加入ESlint规则并生效
// 在module的rules中加入 module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), // 不符合Eslint规则时只警告(默认运行出错) // emitWarning: !config.dev.showEslintErrorsInOverlay } }, ] }

3.4 重新bulid代码运行.