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  阅读(17664)  评论(0编辑  收藏  举报