vue.js开发外卖App项目总结(二)

真实项目中目录结构是怎么来的

vue-cli 初始化项目，然后结合自己的项目再添加目录

vue.js开发利器:vue-cli

vue-cli是vue.js的脚手架工具，在工程中，脚手架是帮我们编写好基础代码，所以vue-cli是帮我们写好vue.js基础代码的工具。帮我们搞定目录结构，本地调试，代码部署，热加载，单元测试等工作。

学习开源工具的方法最好是去它的github看它的readme.md
vue-cli是一个node包，所以我们通过npm install -g vue-cli全局安装它

安装完成后使用：vue init
template-name为模板名称，安装完成后自动生成的代码模板；其中模板分为：官方模板，自定义模板，本地模板。无论是官方模板还是自定义模板，都是在github的repo文件中安装。
比如本项目就是使用webpack模板安装的，目录结构如下：

project-name为模板目录的生成目录

使用的Node版本为v4.6.1，确保版本在4以上

ESLint为ES6的代码风格检查器，本项目未使用单元测试，因为是基于UI的，更多是在界面测试。

如何启动项目

使用vue-cli安装完模板后，使用以下命令，其中npm install是安装模块下代码的依赖(执行时间可能较长，依赖的东西较多)。然后执行npm run dev去运行,浏览器自动打开对应的项目目录。

一般一个项目都是把自己的一些基本代码写好。

项目使用的是vue哪个版本？

开始做的时候是1.0，应该升级到2.0

项目的文件目录

项目的入口文件是index.html，页面的入口js是main.js，

组件的使用

必须先注册，后使用。
注意:分两步，一步都不能少

import header from 'components/header/header.vue'; // 1.首先引用
export default {  //2.注册
    components: {
      'v-header': header
    }
 }

html5对标签大小写不敏感

ESlint的代码规范

目的：它有一些预先定义好的规则，统一代码的风格
(1)比如注释后面必须加空格

// import header from 'components/header/header.vue';

(2)比如If关键字后面添加一个空格，紧贴if是不合法的

(3)强烈要求使用三个等号而不是两个等号

vue文件的一些语法

其中export default是vue的一个语法糖，其中export default后面的对象就是下面import中的hello

import hello from 'components/hello/hello.vue';

查看network面板中，其中app.js为打包后生成的代码，webpack打包时会把css文件打包进js文件。

对项目中目录结构的解析

该目录是vue-cli脚手架工具生成的

vue.js的代码风格是2个格子缩进

bulid和config目录是webpack配置相关，

node_modules是npm install安装的依赖代码库

src文件夹存放源码，开发的所有代码都在该文件下面

static目录是存放第三方静态资源的，该文件下面有一个.gitkeep文件，它的作用是当static这个目录为空，也可以把该目录提交到git代码仓库中，因为通常创建一个空目录，.git会忽略该目录，不会提交到仓库中。

目录下的文件

.babelrc文件
.babelrc文件是babel编译的一些配置，因为项目中使用es6编写的，而大部分浏览器不支持es6，所以需要通过babel将es6编译成es5。
(1)其中presets为预设插件，表示babel转换预先安装的一些插件，

stage表示ECMA的草案，总共有四个阶段，其中stage-2表示stage2-3，而stage-0表示stage0-3，即数组越小包括东西越多。
其中babel-preset-es2015包含将箭头函数和类等转换为es5语法的插件。
(2)plugins表示需要的插件，transform-runtime表示将es6的一些方法做转换，这些插件真正做一些转换的代码，比如symbol和array.from在相关插件中都有具体转换的实现代码。
(3) "comments": false表示转换后的代码不生成注释

.editorconfig文件
.editorconfig表示编辑器的一些配置，

charset = utf-8
indent_style = space  //缩进风格
indent_size = 2 //缩进大小是2个
end_of_line = lf //换行符的风格
insert_final_newline = true //创建一个文件，在文件末尾插入新行
trim_trailing_whitespace = true //自动移除行尾多余空格

eslintignore文件
一级目录下eslintignore忽略语法检查的目录文件，其中build和config目录为webpack的配置目录，所以不进行语法检查

.eslintrc文件
.eslintrc文件是eslint的配置文件，

其中 extends: 'standard',表示继承一个标准的规则，standard是在使用vue-cli创建项目中选择的。
通过rules对具体部分的规则做修改，比如'arrow-parens': 0,，值为0表示忽略规则检查

 // add your custom rules here
  'rules': {
    // allow paren-less arrow functions(允许箭头函数前面不写括号)
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development(对环境检测，如果是开发环境，允许debugger，如果生产环境则不允许)
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'semi': ['error', 'always'],
    'no-tabs': 0,
    'indent': 0,
    'space-before-function-paren': 0
  }

.gitignore文件
.gitignore文件表示git仓库忽略这些文件和目录，不会提交到git仓库中

index.html文件
index.html是我们的入口文件，里面没有依赖任何的css和js文件，因为引用的文件会在项目编译的过程中自动插入到我们的html文件中。
它是怎么插入的？在webpack编译的过程中插入

package.json文件
package.json文件是项目的配置文件，其中，从name到private字段都是使用vue-cli初始化模板时填的一些信息。其中scripts表示我们可以执行的一些命令，比如npm run dev执行的是node build/dev-server.js命令，所以可以通过scripts配置一些脚本。
dependencies表示项目生产环境下的一些依赖，比如"vue": "^2.2.1",其中向上的箭头表示它可以安装从2.2.1开始一直到最新版的vue版本。^2.2.1表示最低安装的版本是2.2.1。
devDependencies表示编译过程的一些依赖，比如babel,eslint，express, 还有webpack相关插件：

"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1"

编译过程的相关插件在我们真正上线运行打包后的代码中是不存在的。

readme文件
readme是项目的描述文件。