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之后自動(dòng)生成)
├── 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后宛瞄,在瀏覽器自動(dòng)彈出訪問頁面:http://localhost:8080/
因?yàn)槭且苿?dòng)端的spa項(xiàng)目,請把開啟您的瀏覽器調(diào)試交胚,換成手機(jī)調(diào)試模式