安裝vue-cli
打開 cmd 命令行工具猛们，輸入npm install -g vue-cli,回車 全局安裝vue-cli
(注：npm 會有點(diǎn)慢灼伤，建議更改為國內(nèi)淘寶的鏡像，只換源即可。在cmd輸入命令：
npm config set registry https://registry.npm.taobao.org
構(gòu)建vue-cli項目
創(chuàng)建項目
通常創(chuàng)建vue-cli項目都是使用的webpack模版，在這里我們也使用webpack模版來創(chuàng)建項目。使用其他模版的請參考 這里俄认。
打開cmd个少，進(jìn)入想要創(chuàng)建項目的目錄下，輸入：
vue init webpack projectname
webpack 默認(rèn)是安裝2.0版本眯杏，若要安裝1.0版本夜焦，需在 webpack 后面加上版本號信息，
vue init webpack project-name
projextname是自定義的項目名稱岂贩，例：我這里命名為vuedemo
命令輸入完成后敲回車茫经，此時會自動下載 webpack模板，稍微等待一會萎津，會讓你按提示完成項目的創(chuàng)建卸伞，如下圖
Project name // 項目名稱
Project description // 項目描述
Author // 作者
Vue build // 構(gòu)建模式，一般默認(rèn)選擇第一種
Install vue-router? // 是否安裝引入 vue-router锉屈，這里選是荤傲，vue-router 是路由組件,后面構(gòu)建項目會用到
Use ESLint to lint your code? // 建議使用，開發(fā)可能會慢一些颈渊，但是容易排錯
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch 這兩個是測試遂黍，可以不用安裝
安裝依賴
項目創(chuàng)建完成，打開文件夾可以看到目錄結(jié)構(gòu)俊嗽。
此時雾家，項目已經(jīng)初具雛形，但還未安裝依賴绍豁，需打開 cmd芯咧，進(jìn)入項目所在根目錄下，輸入npm install,回車竹揍。
我們此時再打開項目文件夾唬党，可以看到多了node_modules文件夾，里面是各種需要的依賴包鬼佣。
運(yùn)行項目
打開 cmd，進(jìn)入到項目所在目錄下霜浴，輸入npm run dev,回車晶衷，啟動項目
完成后，瀏覽器會自動打開阴孟，監(jiān)聽端口8080.
項目結(jié)構(gòu)
總體結(jié)構(gòu)
一個vue-cli的項目結(jié)構(gòu)如下：
build
build文件主要是webpack的配置晌纫，主要啟動文件是dev-server.js，當(dāng)我們輸入npm run dev首先啟動的就是dev-server.js永丝，它會去檢查 node及npm版本锹漱，加載配置文件，啟動服務(wù)慕嚷。
config
config文件主要是項目相關(guān)配置哥牍，我們常用的就是當(dāng)端口沖突時配置監(jiān)聽端口毕泌，打包輸出路徑及命名等
node_modules
node_modules里面是項目依賴包，其中包括很多基礎(chǔ)依賴嗅辣，自己也可以根據(jù)需要安裝其他依賴撼泛。安裝方法為打開 cmd，進(jìn)入項目目錄澡谭，輸入npm install [依賴包名稱],回車愿题。
在兩種情況下我們會自己去安裝依賴：
項目運(yùn)行缺少該依賴包：例如項目加載外部css會用到的
css-loader，路由跳轉(zhuǎn)vue-loader等（安裝方法示例：npm install css-loader）安裝插件：如
vux（基于WEUI的移動端組件庫）蛙奖，vue-swiper（輪播插件）
注：有時會安裝指定依賴版本潘酗，需在依賴包名稱后加上版本號信息，如安裝 11.1.4 版本的
vue-loader雁仲，輸入npm install vue-loader@11.1.4
src
項目核心文件前面已經(jīng)進(jìn)行了簡單的說明仔夺，接下來重點(diǎn)講解main.js，App.vue,及router的index.js
index.html
index.html如其他 html一樣伯顶，但一般只定義一個空的根節(jié)點(diǎn)囚灼，在main.js里面定義的實例將掛載在根節(jié)點(diǎn)下，內(nèi)容都通過 vue 組件來填充
App.vue
一個 vue 頁面通常由三部分組成:模板(template)祭衩、js(script)灶体、樣式(style)
【template】
其中模板只能包含一個父節(jié)點(diǎn)，也就是說頂層的div只能有一個（例如下圖掐暮，父節(jié)點(diǎn)為#app的div蝎抽，其沒有兄弟節(jié)點(diǎn)）
<router-view></router-view>是子路由視圖，后面的路由頁面都顯示在此處.
打一個比方吧,<router-view>類似于一個插槽路克，跳轉(zhuǎn)某個路由時樟结，該路由下的頁面就插在這個插槽中渲染顯示.
【script】
vue 通常用es6來寫，用export default導(dǎo)出精算，其下面可以包含數(shù)據(jù)data瓢宦，生命周期(mounted等)，方法(methods)等灰羽，具體語法請看 vue.js 文檔驮履。
【style】
樣式通過標(biāo)簽<style></style>包裹，默認(rèn)是影響全局的廉嚼，如需定義作用域只在該組件下起作用玫镐，需在標(biāo)簽上加scoped，<style scoped></style>
如要引入外部 css 文件怠噪，首先需給項目安裝css-loader依賴包恐似，打開 cmd，進(jìn)入項目目錄傍念，輸入npm install css-loader,回車矫夷。安裝完成后葛闷，就可以在 style 標(biāo)簽下import所需的 css 文件，例如：
<style>
import './assets/css/public.css'
</style>
這樣口四，我們就可以把 style 下的樣式封裝起來孵运，寫到 css 文件夾，再引入到頁面使用蔓彩，整個 vue 頁面也看上去更簡潔治笨。
main.js
main.js主要是引入 vue 框架，根組件及路由設(shè)置赤嚼，并且定義 vue 實例旷赖，下圖中的
components:{App}就是引入的根組件App.vue
后期還可以引入插件，當(dāng)然首先得安裝插件更卒。
router
router文件夾下等孵，有一個index.js，即為路由配置文件
這里定義了路徑為/的路由蹂空，該路由對應(yīng)的頁面是Hello組件俯萌，所以當(dāng)我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件
類似的，我們可以設(shè)置多個路由上枕，/index,/list之類的咐熙，當(dāng)然首先得引入該組件，再為該組件設(shè)置路由辨萍。
