項目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文件