github地址https://github.com/JohnnyZhangQiao/vue-family
如果對您有幫助，您可以點(diǎn)右上角 "Star" 支持一下 謝謝！ ^_^
另外說明下：這個(gè)demo目前只做首頁，但是該用上的技術(shù)都用上了，簡單易懂。
Vuex是專門為 Vue.js 設(shè)計(jì)的狀態(tài)管理庫
首先是創(chuàng)建一個(gè) store ，里面有:
state(狀態(tài))
mutations（引發(fā)狀態(tài)改變的方法）
actions(觸發(fā)mutations的方法)
然后在每次對數(shù)據(jù)對象進(jìn)行操作的時(shí)候，進(jìn)行dispatch（action 的方法名）用來觸發(fā)mutations的方法來改變state狀態(tài)..
[vue]
[vue-router]
[vuex]
[vue-resource]
[webpack]
[es6-babel]
[less]
[font-awsome] （字體圖形，用于icon）
.
├── README.md
├── dist ? ? ? ? ? ? ? ? ? ? // 項(xiàng)目build目錄（build之后自動生成）
├── package.json ? ? ? ? ? ? // 項(xiàng)目配置文件
├── src? ? ? ? ? ? ? ? ? ? ? // 生產(chǎn)目錄
│ ? ├── assets ? ? ? ? ? ? ? // less js 和圖片資源
│? ├── components? ? ? ? ? // 各種組件
│ ? ├── router ? ? ? ? ? ? ? // 路由存放地方
│? ? ? ├── router.js? ? ? ? // 路由配置
│ ? ├── views ? ? ? ? ? ? ?? // 各種頁面
│ ? ├── vuex ? ? ? ? ? ? ? ? // vuex文件存放
│ ? ? ? ├── store.js ? ? ?? // vuex配置
│ ? └── App.vue ? ? ? ? ? ?? // 根組件
│? └── main.js? ? ? ? ? ? ? // Webpack 預(yù)編譯入口
├── index.html? ? ? ? ? ? ? // 項(xiàng)目入口文件
├── build ? ? ? ? ? ? ? ? ?? // build時(shí)候需要的配置文件
│ ? ├── webpack.config.js ? ?//webpack配置文件
├── .gitignore? ? ? ? ? ? ? //git忽略文件
git clone https://github.com/JohnnyZhangQiao/vue-family.gi
3.安裝node.js(如果您已經(jīng)安裝nodejs和配置好npm環(huán)境，請直接到第5步)
下載對應(yīng)你系統(tǒng)的Node.js版本:https://nodejs.org/en/download/
安裝完成后在命令窗口輸入：node -v 和 npm -v，有版本顯示即為安裝成功
安裝前先介紹下npm與cnpm：
npm：（node package manager）nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）；
cnpm：因?yàn)閚pm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，如果npm的服務(wù)器在中國就好了，
所以我們樂于分享的淘寶團(tuán)隊(duì)干了這事。來自官網(wǎng)：“這是一個(gè)完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，
同步頻率目前為 10分鐘一次以保證盡量與官方服務(wù)同步。”；
另外，cnpm跟npm用法完全一致，只是在執(zhí)行命令時(shí)將npm改為cnpm。
shell
npm install -g cnpm –registry=https://registry.npm.taobao.org
安裝完成后在命令窗口輸入：cnpm -v，有版本顯示即為安裝成功
進(jìn)入下載后的demo文件根目錄，輸入：cnpm install，靜待安裝完成。
進(jìn)入下載后的demo文件根目錄，輸入：npm run dev后，在瀏覽器自動彈出訪問頁面：http://localhost:8080/
因?yàn)槭且苿佣说膕pa項(xiàng)目，請把開啟您的瀏覽器調(diào)試，換成手機(jī)調(diào)試模式
