全面的Vue-cli学习,这一篇就够了!
一、下载
使用vue-cli前,需先安装node.js,node的安装就不赘述,不过在此需要注意:
1. node版本需在4.x以上,首推6.x以上版本(node -v 命令查看)
2. npm要求在 3+ 版本以上 (npm -v 命令查看)
vue-cli下载(推荐NPM方式下载)
npm install -g vue-cli
二、项目初始化
vue init webpack firstVue
这里的webpack为vue-cli最常用的模板名(此模板的项目配置包括:一个全功能的Webpack + vue-loader安装程序,带有热重新加载,linting,测试和css提取),firstVue是项目的文件夹名称。
*此时的vue-cli是基于Vue2.x版本,若想换为1.x则使用以下命令:
vue init webpack#1.0 firstVue
官方将模板分为三类:
第一类为官方模板,通过使用 ”vue init 模板名 项目名” 即可初始化项目信息,具体有以下几种:
webpack :”一个全功能的Webpack + vue-loader安装程序,带有热重新加载,linting,测试和css提取。
webpack-simple : 简单的Webpack + vue-loader设置,用于快速原型设计。
browserify :全功能Browserify + vueify设置用热重装载,掉毛&单元测试。
browserify -simple :用于快速原型设计的简单的Browserify + vueify设置。
pwa :基于webpack模板的vue-cli的PWA模板
简单 :一个HTML文件中最简单的Vue设置
第二类为自定义模板,自定义模板需要在github中fork请求,这个会在后续的进阶中提到。
第三类为本地模板,使用 “ vue init〜/ fs / path / to-custom-template my-project ” 命令进行初始化,这个也会在进阶中提到。
三、项目构建
此处先使用最常用的webpack模板,通过 vue init webpack firstVue初始化后,会在当前文件夹下创建firstVue的子文件件,然后键入一下命令完成项目的构建:
cd firstVue npm install npm run dev
npm install 用以安装此项目的依赖(此处涉及到包管理器的概念,需要node.js基础),所有的依赖均存放在文件夹下的pack.json里,查看dependence或devDependences等可以查看。
npm run dev 执行脚本命令下的dev命令,此命令的细节可在pack.json文件里查看script下的dev属性
脚本命令执行后,会显示编译是否成功,通过本机的端口可在服务器环境下访问项目。
四、脚手架目录详解:
此处通过使用命令查看当前vue版本为2.9.1,-V的v为大写
vue -V
当前版本的Vue-cli目录如下:
(1)build目录:webpack的配置文件目录
(2)config目录:用于存放生产环境和开发环境的配置文件
(3)node_modules目录:存放整个项目的第三方依赖包文件
(4)src目录:用于存放所有的项目文件(项目源码),其中main.js为整个项目的入口文件
(5)static目录:用于存放第三方资源文件
(6)babelrc文件:存放babel的配置信息,当我们使用高级语法,如es6时,需要使用babel的编译工具,此时会在根目录下生成babelrc文件用于存放编译的配置信息。
{ "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"] } } }
presets:预设文件,即babel在编辑高级语法时需要使用的预设编译文件(例如箭头函数编译插件、类编辑插件等),这些预设都可以在node_modules文件夹下找到,env就是一个预设插件,stage-2位草案阶段的高级语法,stage-1代表1,2和3阶段,stage-2代表的是2阶段和3阶段。在node_modules文件夹下也可以找到:如下图:
plugins:设置插件,transform-runtime就是babel的转换插件。
comments:将es6语法转换为es5之后是否增加注释,true为增加
env:对运行环境做配置:test是为在测试环境下做的配置。
(7)editconfig文件:编辑器的配置文件:
root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
root = true表示当打开一个文件时,EditorConfig 插件在文件的目录和其每一级父目录查找 .editorconfig 文件,直到有一个配置文件包含 root = true
EditorConfig 配置文件从上往下读取,并且路径最近的文件最后被读取,匹配到的配置按照读取顺序应用在代码上,最接近代码文件的属性优先级最高
[*]表示对所有文件文件使用 editorconfig,也可以指定某种文件格式
charset = utf-8表示设置文件编码格式为 utf-8
indent_style = space表示所有的缩进使用空格,包括 tab 键产生的空白
indent_size = 2表示设置整数表示规定每级缩进的列数
end_of_line = lf表示统一设置换行符,不同操作系统默认使用不同的换行符
windows 是 crlf,即 \r\n
unix 则是 lf ,即 \n
insert_final_newline = true表示文件都以一个空白行结尾
trim_trailing_whitespace = true表示除去换行行首的任意空白字符
(8)eslintignore:eslint代码检查文件设置:
/build/
/config/
/dist/
/*.js
/test/unit/coverage/
此处表示使用eslint对根目录下的所有js文件以及/build/、/config/、/dist/、/test/unit/coverage/四个目录下的所有文件进行代码风格检测。
(9)eslintrc.js文件:对eslint的配置及导出
module.exports = { root: true, //在父级查找 parser: 'babel-eslint', //确定编译器,babel-eslint基于eslint parserOptions: { //编译器的配置选项 sourceType: 'module' //文件以包模块的方式导入 }, env: { //配置环境变量 browser: true, //浏览器环境 }, // https://github.com/standard/standard/blob/master/docs/RULES-en.md extends: 'standard', //代码风格的检测要求,此处要求为标准水平(打开上面链接可查看标准要求的书写规范) // required to lint *.vue files plugins: [ //添加规范相应文件类型的插件 'html' ], // add your custom rules here //为相应的检测添加规则: // "off" -> 0 关闭规则 // "warn" -> 1 开启警告规则 //"error" -> 2 开启错误规则 'rules': { // allow paren-less arrow functions //箭头函数规则(定义箭头函数使不用写括号) 'arrow-parens': 0, // allow async-await //异步规则 允许使用异步语法 'generator-star-spacing': 0, // allow debugger during development // 开发过程调试规则 开发环境允许debug 生产环境不允许debug 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 } }
所有的rules选项均可在 https://github.com/standard/standard/blob/master/docs/RULES-en.md查看,并配置到文件中。
(10)gitignore文件:在使用git提交文件时,忽略的文件与文件夹
(11)postcssrc文件:postcss配置文件
(12)index.html项目的入口模板
(13)package.json整个项目的配置信息
(14)README.md:项目的说明文件