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
}
}```

3. 如何在老项目中加入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代码运行.
posted @ 2018-09-07 13:23  PI_M  阅读(19362)  评论(0)  编辑  收藏  举报