【Vue实战之路】1、Vue-cli入门及Vue工程目录全解。

全面的Vue-cli学习，这一篇就够了！

1、下载

使用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

2、项目初始化

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 ” 命令进行初始化，这个也会在进阶中提到。

3、项目构建

此处先使用最经常使用的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属性

脚本命令执行后，会显示编译是否成功，经过本机的端口可在服务器环境下访问项目。

 4、脚手架目录详解：

此处经过使用命令查看当前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：项目的说明文件