项目vue2.0仿外卖APP（二）

vue-cli开启vue.js项目

github地址：https://github.com/vuejs/vue-cli

Vue.js开发利器vue-cli，是vue的脚手架工具。

在工地上，脚手架是工人搭建好的架子，可以帮助工人们做业；在技术圈，脚手架就是来帮助咱们编写好基础的代码的工具。Vue-cli就是帮助咱们写好vue.js基础代码的工具。

使用Vue.js，当你构建一个原型的时候，你所须要作的一般就是经过 <script> 把Vue.js引入进来，而后就完事了。可是真实状况每每不是这样的。当咱们真正开发一个应用的时候，咱们不可避免的会用到一大堆的工具，模块化、预处理器、热模块加载、代码校验和测试。这些工具对于一个须要长期维护的大型应用是必须的，可是项目初始化将会是让人痛苦的事情。这就是为何咱们作了 vue-cli ，让一个简单的命令行工具来帮助你快速的构建一个拥有强大构建能力的Vue.js项目。

能够说，它仅仅是为了初始化。

使用方法能够查看github：

在这里咱们使用了淘宝镜像：https://npm.taobao.org/

下面是使用方法：(打开git)

https://segmentfault.com/q/1010000008042797

# 安装vue-cli：Vue-cli是一个node包，因此要经过cnpm去安装

cnpm install -g vue-cli

# 使用vue-cli初始化项目

vue init webpack my-project

# 进入到目录

cd my-project

# 安装依赖，生成node_modules目录

cnpm install

# 开始运行

cnpm run dev

上面的这些命令会从 vuejs-templates 拉取模板并安装，而后用NPM安装依赖，最后你只须要用个NPM脚本启动就能开始开发了。

 

使用vue-cli初始化项目：vue init webpack my-project的语法为：

vue init <template-name> <project-name>

Template-name就是模板名称：模板就是安装成功后给你自动生成的一个代码模板。

这些官方的模板存在的意义在于提供强大的项目构建能力，以致于用户能够尽量快速的进行开发。然而可否真正的发挥做用还在于你如何组织你的代码和你使用的其余库。

全部的官方模板均可以在 vuejs-templates organization 找到。若是有一个新的模板放在了这里，你能够直接就用 vue init <template-name> <project-name> 使用。你也能够运行 vue list 命令来看看如今有哪些官方模板是如今可用的。

模板分为三类：

一、官方模板，就是咱们一般用的

webpack与webpack-simple两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了.

二、自定义模板

vue init username/repo my-project

从本身的仓库去安装。

不管是官方模板仍是自定义模板，它都是去GitHub repo里面安装的。好比webpack模板：

https://github.com/vuejs-templates/webpack

这就是webpack仓库的模板地址：

点进去template这个目录：

这部分就是咱们最终安装后会生成的代码。

Project-name：是安装后会在当前目录下生产一个名为project-name的一个目录，而后把它的模板、全部代码都自动生成到这个目录下。

无处不在的Vue组件

每个模板都有本身的做用：基础版本用于快速构建原型，高级版本用于正式开发。这些模板有许多共同的功能，如都支持 *.vue 组件。这意味着任何第三方的Vue组件均可以随意使用，而且能够垂手可得的发布在NPM上 - 让咱们建立出更多的可重用组件！

 

备注：

ESLint：http://eslint.org/docs/user-guide/configuring。在团队协做中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则能够辅助编码规范执行，有效控制代码质量。

http://www.tuicool.com/articles/7JZZJzn

Karma+Mocha：https://github.com/karma-runner/karma-mocha。单元测试

mocha是一个js的测试框架。Karma是一个驱动测试的Runner。也就是说，karma为测试框架准备运行环境，可让这些测试在真正的浏览器里运行。

Nightwatch：http://nightwatchjs.org/。验收测试框架，使用Selenium WebDriver API以将Web应用测试自动化。它提供了简单的语法，支持使用JavaScript和CSS选择器，来编写运行在Selenium服务器上的端到端测试。

 

关于生成项目文件的介绍

 

http://blog.csdn.net/hongchh/article/details/55113751

build目录和config目录：都是与webpack的配置相关。

node_modules目录：npm install安装的依赖代码库

src目录：存放项目源码

statis目录：存放一些第三方静态资源的。能够看到它里面只有一个.gitkeep文件，它的做用是当这个目录为空也能够把这个项目提交到git代码仓库里。由于一般若是你建立一个空目录，git会忽略掉这个目录，它是不会提交到仓库里的。

.babelrc文件：

它是babel的一些配置。由于咱们的代码都是ES6，而大部分浏览器都是还不支持的。因此一般咱们的作法是将ES6经过babel编译成ES5，而.babelrc就是babel编译的一些配置。其中presets表示预设，["es2015", "stage-2"]表示babel转换预先须要安装的插件。咱们能够在node_modules里面能够看到这两个插件。

"plugins": ["transform-runtime"]：把ES6的方法作转换。

.editorconfig文件：编辑器的配置

 

分别是编码、缩进风格、缩进大小、换行符的风格、文件末尾插入新行、自动移除多余空格。

.eslintignore文件：忽略语法检查的目录文件

 

表示不会对build目录下和config目录下中的js文件作ES语法检查。

.eslintrc.js文件：Eslint的配置文件

extends: 'standard'：表示继承一个标准的规则，能够在这里看到：

https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style

都是预先定义好的规则。

咱们也能够经过rules对一些具体的规则作修改。

好比：

这里就修改了三个规则。配置成0就是不想要以前定义好的规则。

no-debugger：作一个判断，若是是开发环境就能够debugger，是生产环境就不能，由于生产环境下debugger是很是危险的。

.gitignore文件：

就是git仓库去忽略掉这些文件或者目录，不会提交到代码里面。

Index.html文件：就是咱们的入口html文件

没有css，js文件，由于咱们引用的资源会在咱们的项目编译过程当中自动插入到这个html文件中。

Package.json文件：项目的配置文件，用来描述一个项目。

运行”npm run dev”的时候执行的是build/dev-server.js文件，运行”npm run build”的时候执行（用来执行发布的）的是build/build.js文件，咱们能够从这两个文件开始进行代码阅读分析。

打包完成后，会生成 dist 文件夹，若是已经修改了文件路径，能够直接打开本地文件查看。项目上线时，只须要将 dist 文件夹放到服务器就好了。

表示咱们这个项目中生产环境的一些依赖，通用能够在node-modules查看。

Devdeendencies是表示咱们编译过程的一些依赖。

Readme文件：项目的描述文件。

 

项目运行

了解当前代码是如何运行的。

http://blog.csdn.net/sinat_35512245/article/details/54091956

先来看它的入口文件index.html

入口js文件是main.js

依赖了两个vue库中的Vue、App.vue中对的App。

接着实例化一个Vue的实例，element挂载到”#app”上；模板是App；而后再用components注册一个当前App的插件，ES6的简写。也就是这个实例依赖App这个组件。

 

App.vue组件：

每一个组件分为三个部分：模板、逻辑、样式。

<hello>标签须要经过components注册才可使用。

这是页面请求到的文件资源。

app.js：打包后生成的代码；没有css，那时由于webpack在打包的时候也把css打包到js里面了。

能够看到：app.js接近1m，这么大，那时由于咱们把那些ES6语法在运行时作一个解析。

 

webpack打包

Webpack：当前最火的前端构建工具。http://webpack.github.io/

Webpack的功能：把各类各样的前端资源编译打包，最终输出css,图片和js。

 

Webpack的配置复杂

如上所述：当文档最终生成一个app.js时，源码中并无这个文件，这个就是由于webpack的编译。

 

这里对开发时的配置作讲解，运行时的配置日后再说：

下面从它的入口：package.json里面说的npm run dev这个入口开始分析，来看看webpack如何坐编译的：

npm run dev其实就是执行了"node build/dev-server.js"这个命令，运行了build目录下的dev-server.js文件

这个文件首先是有各类依赖：

Path就是node.js提供的API，提供一些文件路径操做的方法；

Express是node.js的一个框架，这里用它去启动一个webserver；

Webpack就是核心编译工具，直接用node.js提供的API，而不用全局的webpack；

proxyMiddleware就是HTTP代理的一个中间件，能够代理和转发API ;

WebpackConfig就是webpack的相关配置，这里因为是一个开发时的配置，因此它是依赖webpack.dev.conf。

看一下这个配置文件webpack.dev.conf：

除了刚刚提到的一些依赖，还有依赖一个webpack-merge，就是用来合并配置文件的；

Utils就是工具方法；

baseWebpackConfig也是一个webpack配置文件，它是被开发时的配置文件和运行时的配置文件所共享的；

HtmlWebpackPlugin就是webpack提供的一个操做HTML文件的一个插件。

Webpack.base.conf.js文件：定义webpack一些基础配置

projectRoot定义了当前项目的根目录；

Module.exports = {这里面就是webpack的基本配置

  entry：一个入口配置。app: './src/main.js'表示webpack编译的入口js文件

  Output：输出的配置。path是路径；filename输出的文件名名称

  Resolve：就是代码中request、import的一些相关配置。Extensions自动补全文件后缀名；fallback指向node_modules这个模块，也就是说当咱们在前端request模块找不到的时候就能够在node_modules里面找；alias提供一些别名，也就是request路径中能够经过别名缩短书写。

  resolveLoader：里面的fallback跟上面相似。

  Module：preLoaders、loaders相似，对某种类型的文献应用某一个loader去作处理，webpack编译阶段就是利用各类loader对各类文件作编译。不一样的文件利用不一样的loader作处理。

  Eslint：formatter当eslint检查到错误的时候会有好地提示一个信息而且提供连接查看错误缘由。

  Vue： 与css有关，utils里面

}

 

Webpack.dev.conf.js文件

热加载就在这里。

 

dev-server.js文件