一、環境搭建
1、安裝node、npm、webpack，不多說
2、安裝vue-cli腳手架構建工具，打開命令行工具輸入：npm install vue-cli -g，安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如果出現相應的版本號，則說明安裝成功。
二、用vue-cli來構建項目
1、在硬盤上找一個文件夾放工程用的。這里有兩種方式指定到相關目錄：（1）cd 目錄路徑 （2）如果以安裝git的，在相關目錄右鍵選擇Git Bash Here
2、安裝vue腳手架輸入：vue init webpack exprice ，注意這里的“exprice” 是項目的名稱，可以說是隨便起名，但是需要注意的是“不能用中文，且不能用大寫字母”。
$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令 This will install Vue 2.x version of the template. ---------------------這里說明將要創建一個vue 2.x版本的項目 For Vue 1.x use: vue init webpack#1.0 exprice ? Project name (exprice) ---------------------項目名稱 ? Project name exprice ? Project description (A Vue.js project) ---------------------項目描述 ? Project description A Vue.js project ? Author Datura --------------------- 項目創建者 ? Author Datura ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，也就是以后是spa（但頁面應用需要的模塊） ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測規則，這里個人建議選no ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? (Y/n) ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? (Y/n) ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "exprice". To get started: --------------------- 這里說明如何啟動這個服務 cd exprice npm run dev
3、cd 命令進入創建的工程目錄，首先cd exprice（這里是自己建工程的名字），然后npm run dev，啟動服務器。服務啟動成功后瀏覽器會默認打開一個“歡迎頁面”，如圖。
注意：這里是默認服務啟動的是本地的8080端口，所以請確保你的8080端口不被別的程序所占用。
三、目錄介紹
創建完成的“exprice”目錄如下：
簡單說明下各個目錄都是干嘛的：
總體框架：一個vue-cli的項目結構如下，其中src文件夾是需要掌握的，所以本文也重點講解其中的文件，至於其他相關文件，了解一下即可。
四、文件結構細分
1、build——[webpack配置]
build文件主要是webpack的配置，主要啟動文件是dev-server.js，當我們輸入npm run dev首先啟動的就是dev-server.js，它會去檢查node及npm版本，加載配置文件，啟動服務。
2、config——[vue項目配置]
config文件主要是項目相關配置，我們常用的就是當端口沖突時配置監聽端口，打包輸出路徑及命名等
3、node_modules——[依賴包]
node_modules里面是項目依賴包，其中包括很多基礎依賴，自己也可以根據需要安裝其他依賴。
安裝方法為打開cmd，進入項目目錄，輸入npm install [依賴包名稱]，回車。
在兩種情況下我們會自己去安裝依賴：
（1）項目運行缺少該依賴包：例如項目加載外部css會用到的css-loader，路由跳轉vue-loader等（安裝方法示例：npm install css-loader）
（2）安裝插件：如vux（基於WEUI的移動端組件庫），vue-swiper（輪播插件）
注：有時會安裝指定依賴版本，需在依賴包名稱后加上版本號信息，如安裝11.1.4版本的vue-loader，輸入npm install vue-loader@11.1.4
4、src——[項目核心文件]
項目核心文件前面已經進行了簡單的說明，接下來重點講解main.js，App.vue及router的index.js
五、腳手架代碼詳解
我們看下創建后的項目目錄里的主要文件：
1、index.html——[主頁]
這個沒什么好說的，就是一個簡單的html頁面，這里id='app'，是為后面的設置vue作用域有關的。
index.html如其他html一樣，但一般只定義一個空的根節點，在main.js里面定義的實例將掛載在根節點下，內容都通過vue組件來填充
2、文件：Hello.vue
說明：在*.vue文件，template標簽里寫html代碼，且template直接子級只能有一個標簽。style標簽里寫樣式，script里面寫js代碼。
3、文件：App.vue——[根組件]
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/> //這里是用來展示路由頁面內容的，如果想用跳轉就用<router-link to='xxx'></router-link>
</div>
</template>
<script> export default { name: 'App' } </script>
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)：
【template】
其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例如下圖，父節點為#app的div，其沒有兄弟節點）
<router-view></router-view>是子路由視圖，后面的路由頁面都顯示在此處。打一個比喻吧，<router-view>類似於一個插槽，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示
【script】
vue通常用es6來寫，用export default導出，其下面可以包含數據data，生命周期(mounted等)，方法(methods)等，具體語法請看vue.js文檔，在后面我也會通過例子來說明。
【style】
樣式通過style標簽<style></style>包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加scoped，<style scoped></style>
如要引入外部css文件，首先需給項目安裝css-loader依賴包，打開cmd，進入項目目錄，輸入npm install css-loader，回車。安裝完成后，就可以在style標簽下import所需的css文件，例如：
<style> import './assets/css/public.css'
</style>
這樣，我們就可以把style下的樣式封裝起來，寫到css文件夾，再引入到頁面使用，整個vue頁面也看上去更簡潔。
4、文件：main.js——[入口文件]
這個js文件是主頁面配置的主入口。主要是利用ES6的模塊化引入模板
main.js主要是引入vue框架，根組件及路由設置，並且定義vue實例，下面代碼中的components:{App}就是引入的根組件App.vue
后期還可以引入插件，當然首先得安裝插件。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入vue文件
import App from './App'// 引入同目錄下的App.vue模塊
import router from './router'// 引入vue的路由
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ el: '#app',//定義作用范圍就是index.html里的id為app的范圍內
router,//引入路由
components: { App },//注冊引入的組件App.vue
template: '<App/>'//給Vue實例初始一個App組件作為template 相當於默認組件
})
5、router——[路由配置]
router文件夾下，有一個index.js，即為路由配置文件
import Vue from 'vue' //引用vue文件
import Router from 'vue-router' //引用vue路由模塊，並賦值給變量Router
import HelloWorld from '@/components/HelloWorld' //英文HelloWorld.vue模版，並賦值給變量HelloWorld,這里是“@”相當於“../”
Vue.use(Router) //使用路由
export default new Router({ routes: [ //進行路由配置，規定“/”引入到HelloWorld組件
{ path: '/', name: 'HelloWorld', //這個name暫時不知道用啥用，根據官方文檔說的是方便排錯的
component: HelloWorld //注冊HelloWorld組件
} ] })
這里定義了路徑為'/'的路由，該路由對應的頁面是HelloWorld組件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件
類似的，我們可以設置多個路由，‘/index’,'/list'之類的，當然首先得引入該組件，再為該組件設置路由。
說明：如果需要增加組件那就在components文件下定義xx.vue文件並編寫代碼即可；如果需要配置路由就要在index.js進行路由“路徑”配置；還需要點擊跳轉就要用到<router-link></router-link>標簽了。