寫于 2017-2-7
Vue中文站：cn.vuejs.org vue-router官方教程：router.vuejs.org/zh-cn vuex官方教程：vuex.vuejs.org/zh-cn
完整干凈Demo地址：coding.net/u/java_luo/p/Vue_Demo/git
安裝vue-cli 官方腳手架搭建工具
①、直接全局安裝 cnpm install vue-cli -g
②、然后打開npm命令行工具，cd到你想要的某個目錄中，并輸入： vue init webpack PRojectname (即開始創建名為projectname的腳手架，官方提供了webpack-simple和webpack兩種)
③、會引導你創建最基本的腳手架：
這樣基本項目結構就創建好了：
只需要關心src目錄中的內容就好:
assets: 存放圖片、音頻等一切靜態資源 components: 存放所有的vue組件 router: 里面只有一個路由配置文件
其他地方的文件包括： babel轉碼器配置； webpack 開發模式和最終打包的生產模式所需配置； eslint代碼檢查器配置； （ESLint中文網：eslint.cn） 建議自己到eslint照著文檔配一套適合自己的語法檢測。
cnpm install vuex –save
在項目的src文件夾下新建一個文件夾：store 在其中新建幾個基本文件：
actions.js – vuex核心之一 getters.js – 一個方便的工具級接口，可以方便的構建全局state自定義方法 index.js – 最終所有的部分都匯聚到此，這就是store對象 mutations.js – 改變store中各個數據的唯一方法 rootState.js – 這是我自己弄的，只是把store中的各個數據都保存在這里，方便查看，不然全都放到上面的index.js，那文件里面有點亂
注：官方一些例子中，還有modules，即模塊，用于分擔store的壓力，因為項目大了之后，數據多，狀態多，所以把store分成多個module,每個module都有自己的actions,getters,mutations等，最終在index.js中全部合并。但目前我不想這么做。
我自己創建了個rootState.js保存所有的頂層數據。你也可以按照官方的例子做。
src/store/index.js:
import Vue from 'vue';import Vuex from 'vuex';import * as actions from './actions';import * as mutations from './mutations';import * as getters from './getters';import state from './rootState';Vue.use(Vuex)const store = new Vuex.Store({ state, getters, actions, mutations})export default store;以上是vue官方的大致寫法，照葫蘆畫瓢即可。如果你沒有在getters中寫任何東西，那就不要引入getters需要把store加載到此文件中
main.js 原本是這樣的：
import Vue from 'vue'import App from './App'import router from './router'/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }})現在改成這樣：
import Vue from 'vue';import App from './App';import router from './router';import store from './store';/* eslint-disable no-new */new Vue({ el: '#app', store, router, template: '<App/>', components: { App }})這樣就算是把store掛載到vue上了
寫一個簡單的例子，把路由、vuex這一圈路程走一遍
①、在src/components中新建Test.vue
Test.vue:
<template> <div> <span>{{ msg }}</span> <!-- 我們稍后在store上定義一個msg屬性 --> <button @click='fun'>獲取數據</button> </div></template><script>import Vue from 'vue';import { mapGetters, mapActions } from 'vuex';export default { name: 'test', methods: { ...mapActions([ // 從store上綁定的action中載入需要的到此組件中 'fun', // 我們稍后在src/store/actions.js中創建一個名為fun的方法 ]), }, computed: { ...mapGetters([ // 從store上綁定的getters中載入需要的到此組件中 'msg' // 我們稍后在src/store/getters.js中創建一個名為msg的方法 ]), }}</script>這個例子的用意是：①、用戶點擊button,觸發綁定在click上的fun方法②、fun是定義在actions.js中的，這個方法會調用vue自帶的commit方法③、commit方法會自動調用mutations中對應的方法④、在mutations中更新store上的數據msg,從而Test.vue中的msg自動得到更新②、在src/router/index.js中加入Test組件的路由：
import Vue from 'vue';import Router from 'vue-router';import Hello from 'components/Hello';import Test from 'components/Test'; // 引入Test組件Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello }, { path: '/test', // 定義Test組件的訪問路徑 name: 'Test', // 命個名，沒有太大作用 component: Test // 指向真正的Test組件 } ]})③、在rootState.js中定義一個msg屬性：
const state = { msg: '', // 初始值為空}export default state;④、actions.js中的fun方法：
import reqwest from 'reqwest';// reqwest,一個封裝了promise的異步請求插件// 需要cnpm install reqwest --saveexport const fun = ({ commit }) => { reqwest({ url: `url地址`, method: 'post', contentType: 'application/json', crossOrigin: true, data: 參數, dataType: 'json', }).then(msg => { commit({ type:'getMsg', // 這個type很重要，vue會自動去找mutations.js中名為getMsg的方法 msg, // 成功后把得到的數據通過commit傳入mutations }); })};由于暫時沒有服務，Demo中用了setTimeout模擬異步請求⑤、mutations.js中的getMsg方法
export const getMsg = (state, payload) => { state.msg = payload.msg;}只是簡單的把最新得到的msg賦給state上的msg屬性⑥、運行項目
cnpm install cnpm run dev
會自動打開瀏覽器，進入localhost:8080/#
在瀏覽器地址欄輸入：localhost:8080/#/test 進入我們的測試頁面
點擊按鈕，可以看到數據的變化
①、到src/config/index.js中改一個參數： 
把這個改為false，不然在最終打包的文件中會出現一些map文件 map文件的作用在于：項目打包后，代碼都是經過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準確得知是哪里的代碼報錯。有了map就可以像未加密的代碼一樣，準確的輸出是哪一行哪一列有錯。
②、運行 cnpm run build 開始打包
③、會在項目目錄下自動創建dist目錄，打包好的文件都在其中： 
把這些文件甩給后臺開發人員就行了
Vue 相比 React，我認為更加靈活，但碎片知識也很多。 Vue的ui庫，我用了一下elementUI庫，還行吧，但有些地方設計得沒法用，比如Table組件，我如果要動態構建字段該怎么辦。還有如果要用Table組件，就必須引入 import { Table, TableColumn } from ‘element-ui’; 然后 Vue.use(Table); Vue.use(TableColumn);
這太弱智了… Vue本身有些設計我也覺得些許坑爹。 不過Vue好在有完整的中文文檔，中文教程。相比React的中文官網好很多。 比起React，Vue可以在嵌套組件中直接訪問store，尤其有了getter這個設計，太方便了。
細節1
favicon.ico 的 問題
把favicon.ico放在項目的根目錄下（不是src中，是最外面） 然后在build/webpack.dev.conf.js中找到：
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', favicon: 'favicon.ico', // 在此處添加一行這個，用于webpack生成index.html時，自動把favicon.ico加入HTML中 inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true chunksSortMode: 'dependency' }),同理，在build/webpack.prod.conf.js中也這么干。
新聞熱點
疑難解答
