摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代，和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。

主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試

在如今前端技術(shù)飛速發(fā)展的時(shí)代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue，小生表示可以理解，如果作為中國(guó)的前端猿不知道 vue，小生表示很遺憾。而 vue-cli 作為官方推薦的快速構(gòu)建 vue 項(xiàng)目的腳手架，你應(yīng)該學(xué)會(huì)使用，本文將介紹如何使用 vue-cli。

在使用vue-cli前，希望你具備以下條件：

扎實(shí)的 JavaScript / HTML / CSS 基本功

通讀官方教程 (guide) 的基礎(chǔ)篇

這里我就不再贅述什么是 Vue.js 了，請(qǐng)需要了解的同學(xué)前往：

vuejs.org／中文文檔

GitHub

查看相關(guān)資源信息。

檢查是否安裝 node.js, 如果沒(méi)有請(qǐng)根據(jù)您的系統(tǒng)安裝

node -v
v8.00

全局安裝 vue-cli

npm install -g vue-cli

vue-cli 的命令行

  命令:
  
  init        從模板中創(chuàng)建項(xiàng)目
  list        列出所有的官方模板
  build       構(gòu)建項(xiàng)目
  help [cmd]  展示[cmd]命令的幫助信息

使用vue list 查看所有模板

可用的官方模板:

★  browserify - 功能齊全的 Browserify + vueify 配置， 具備 hot-reload, linting & unit testing。
★  browserify-simple - 簡(jiǎn)單的 Browserify + vueify 配置，便于快速構(gòu)建。
★  pwa - 基于 webpack 的 PWA 模板。
★  simple - 基于單html文件的最簡(jiǎn)單的vue配置模板。
★  webpack - 功能齊全的 Webpack + vue-loader 配置 hot reload, linting, testing & css extraction。
★  webpack-simple - 簡(jiǎn)單的 Webpack + vue-loader 配置，便于快速構(gòu)建。

使用vue init創(chuàng)建基于webpack模板的項(xiàng)目（目前使用最多）

vue init webpack <項(xiàng)目名>

* Project name (demo) 項(xiàng)目名稱(chēng)，不能大寫(xiě)和中文，直接回車(chē)，使用默認(rèn)名稱(chēng)
* Project description (A Vue.js project) 項(xiàng)目描述，也可直接點(diǎn)擊回車(chē)，使用默認(rèn)值
* Author 項(xiàng)目作者，使用默認(rèn)名字
* Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數(shù)情況下都使用
* Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個(gè)代碼風(fēng)格管理工具，是用來(lái)統(tǒng)一代碼風(fēng)格的，并不會(huì)影響整體的運(yùn)行，這也是為了團(tuán)隊(duì)開(kāi)發(fā)，一般項(xiàng)目中都會(huì)使用
* Pick an ESLint preset 選擇一個(gè)ESLint預(yù)設(shè), 編寫(xiě)vue項(xiàng)目時(shí)的代碼風(fēng)格, 選擇默認(rèn)Standard即可
* Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測(cè)試，選擇安裝
* Setup e2e tests with Nightwatch? (Y/n) 是否安裝e2e測(cè)試 ，選擇安裝

cd 到 demo 目錄下，發(fā)現(xiàn)如下的項(xiàng)目結(jié)構(gòu)

文件說(shuō)明

-- build                     目錄放的是構(gòu)建腳本（包括構(gòu)建時(shí)要用到的webpack 配置）
-- config                    配置腳本（vue項(xiàng)目啟動(dòng)時(shí)需要的配置，開(kāi)發(fā)模式和生產(chǎn)模式）
-- node_modules              通過(guò)npm install 安裝的項(xiàng)目依賴(lài)包
-- src                       項(xiàng)目源碼目錄
     -- assets                 項(xiàng)目模塊資源文件包括：圖片，css（會(huì)被webpack處理）
     -- components             項(xiàng)目相關(guān)的vue組件，便于重用
     -- router                 項(xiàng)目的路由定義
        App.vue                頁(yè)面入口文件
        main.js                項(xiàng)目的入口文件，掛在vue實(shí)例，加載路由，中間件等公共組件
-- static                    頁(yè)面需要引入的外部的純靜態(tài)資源(會(huì)直接拷貝到dist/static/里面)
-- test                      項(xiàng)目測(cè)試
     -- e2e                    模擬用戶(hù)行為的測(cè)試
     -- unit                   單元測(cè)試
.babelrc                     ES6語(yǔ)法編譯配置,把我們ES2105的代碼通過(guò)它編譯成ES5的
.editorconfig                編輯器配置，定義代碼格式
.eslintignore                忽略語(yǔ)法檢查的目錄文件配置
.eslintrc.js                 eslint的配置文件
.gitignore                   配置Git倉(cāng)庫(kù)的忽略項(xiàng)
.postcssrc.js                postcss的配置
index.html                   項(xiàng)目入口模板文件
package.json                 項(xiàng)目基本信息，運(yùn)行腳本和相關(guān)依賴(lài)
README.md                    項(xiàng)目介紹及開(kāi)發(fā)指南

首先安裝依賴(lài)

npm install

開(kāi)發(fā)模式

npm run dev

服務(wù)開(kāi)啟成功后，瀏覽器打開(kāi)：http://localhost:8080（默認(rèn)服務(wù)啟動(dòng)的是8080端口，如果你想另起端口，可以修改 config/index.js 文件的 port）

生產(chǎn)環(huán)境

首先需要打包 npm run build ，打包完成后會(huì)在項(xiàng)目下生成 dist 文件夾，我們只需要將此文件夾部署到web服務(wù)器上即可。

如果您堅(jiān)持到了這一步，恭喜您，您至少?zèng)]有放棄。整個(gè)項(xiàng)目雖然很簡(jiǎn)單地一氣呵成了，但是其中涉及到的技術(shù)點(diǎn)還有待我們?nèi)ヌ剿?，革命尚未成功，同志仍需努力?/p>