寫在前面：
????項目地址：GitHub - jianjiayi/Merchant: vue全家桶開發(fā)商戶后臺管理，vue2.0手把手教你開發(fā)商戶管理端后臺
有什么不明白的券膀，可以發(fā)郵件給我：m13121378101@163.com
一俭正、簡單的初始化一個vue-cli項目。
進入一個文件夾例如pc：cd pc;
開始初始化一個vue-cli項目：
vue init webpack Merchant
等一段時間，下載完成
進入文件夾：cd Merchant
執(zhí)行操作：npm run dev
在瀏覽器輸入：http://localhost:8081
到這里基本工作完成谱仪！
二玻熙、安裝element-ui,并使用UI框架搭建基本的后臺頁面。
打開element-ui官網(wǎng)：Element
開始安裝element-ui疯攒，這里推薦使用cnpm安裝嗦随，如何使用cnpm我就不多說了，自行百度
安裝：cnpm i element-ui -S
開始使用UI框架敬尺，在main.js中添加如下代碼：
import ElementUIfrom 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
簡單的修改conponents/Helloworld.vue::
現(xiàn)在重新運行：npm run dev
三枚尼、搭建后臺頁面整體布局、使用組件
先看下基本后臺布局砂吞，幾個簡單組件署恍，這個截圖是我用iview框架搭建的，所以本項目可能與這個有所不同蜻直，但是差別不會太大盯质。
在src目錄下新建文件目錄如下圖：
現(xiàn)在先編寫home.vue:
這些代碼都是復制element-ui里面的，代碼：頁面布局容器
這是項目報錯了：
看這意思就明白了概而，我們沒有安裝sass-loader,所有在使用sass時報錯呼巷，那我們就來安裝sass-loader:
cnpm install --save-dev sass-loader
//sass-loader依賴于node-sass
cnpm install --save-dev node-sass
這樣就不報錯了吧信认！
接下來我們再來修改下路由router/index.js:
我們重新運行下項目：npm run dev持舆，來看下結果吧东帅！
基本樣子已經(jīng)搭建好了核偿，我們開始實現(xiàn)組件化吧贤牛，我們先抽離兩個組件：header.vue尘吗、slider.vue;
寫好的樣子如下圖：
home.vue代碼：
header.vue組件代碼：
再看下slider.vue組件代碼：
到這里我們的項目主頁基本寫完了鹉梨，但是我們最終需要的不是靜態(tài)的頁面婴程，是根據(jù)點擊左側菜單晋辆，顯示不同的頁面的效果渠脉，好的接下來，我們寫下路由!
四瓶佳、vue-router,實現(xiàn)多級路由嵌套芋膘，展示不同的菜單對應的頁面
1、安裝vue-router
學習如何使用vue-router之前霸饲，建議先看下vue-router官網(wǎng)：Vue Router | 起步
我之前寫過一個關于vue-router多級路由嵌套的文章为朋，希望你去看下，這里有地址：vue-router設置多級路由那些事 - 簡書
言歸正傳厚脉，開始寫代碼习寸，這里我們不用安裝vue-router，因為在項目初始化的時候傻工，我們安裝過了霞溪，如果沒有安裝孵滞，那就在項目根目錄下執(zhí)行（安裝過的小朋友，這里就不需要了）：
cnpm install vue-router
在main.js下添加如下代碼：
importVueRouterfrom'vue-router'
Vue.use(VueRouter)鸯匹；
2坊饶、創(chuàng)建幾個需要的路由頁面
在src/views文件下創(chuàng)建如下文件目錄：
user.vue添加如下代碼：（order-list.vue、goods-list.vue代碼基本一樣殴蓬，就不一一列舉了）
這里值得注意的是匿级，common/abstract.vue這個文件，這個文件是一個共用文件染厅，代碼如下：
3痘绎、現(xiàn)在修改下home.vue:刪掉絲代碼，添加router-view,用來展示相關頁面
4肖粮、現(xiàn)在來修改src/router/index.js? 存放路由文件
寫到這里孤页，我們去檢驗下，自己寫的路由有沒有問題尿赚，那我們重新啟動下項目：
npm run dev
在瀏覽器里輸入：
http://localhost:8080/#/goods/list
如果你看到是這樣的散庶，那恭喜你寫的路由沒有問題了蕉堰，如果不是凌净，小朋友你可要認真看些上面的截圖了
好奇的同學就會想到了，我們要的不是在瀏覽器里輸入路由地址屋讶，我們要點擊左側菜單欄冰寻，實現(xiàn)切換路由呀！好的皿渗，那我們去實現(xiàn)這樣的功能吧斩芭！
5、slider.vue 動態(tài)的去展示所設計的的路由列表
????1乐疆、我們先來在src/router文件下新建silderPath.js文件：
? ? 2划乖、我們將src/router/index.js下的部門代碼，拷貝到silderPath.js下挤土，silderPath.js：
? ? 3琴庵、再來修改下src/router/index.js文件，代碼如下：
? ? 4仰美、接下來 就是重寫layout/slider.vue組建了迷殿，寫好的代碼如下：
????這里對navMenu這個組件不了解的小伙伴，可以看下這里咖杂，有對這個組件詳細的解釋：Element
重啟下服務器：npm run dev? ?可以了庆寺，這個是不是你要的結果呀？
還有的同學會說诉字，我的項目需求側邊欄是這樣的懦尝！那樣的知纷？就是側邊欄可以點擊收縮的那種。好的陵霉，element-ui提供了這種效果屈扎，我們去實現(xiàn)吧！
先看看效果圖：
1撩匕、修改header.vue組件鹰晨，添加如下代碼：
2、修改silder.vue組件：
3止毕、在修改下home.vue:
把幾個組件修改完模蜡，我們現(xiàn)在去瀏覽下是否是我們要的結果呢？重新啟動：npm run dev扁凛。
注意下忍疾，這里用到了父子組件之間通信，那么如何通信的呢谨朝？
1卤妒、父組件—>子組件：
? ? 在父組件data定義變量，在子組件props里接受這個變量字币。這個變量傳遞是單向的则披，也就說父組件變量改動了，子組件接受的變量就隨之變化洗出；但是子組件接受的變量改變士复，不能引起父組件變量變化，這個vue2.0是不允許的翩活，而且會報錯阱洪。
2、子組件—>父組件：
? ? 剛才說了菠镇，不允許子組件直接修改父組件傳遞過來的變量冗荸，那么真的不能修改了嗎？不是的利耍。
? ? 子組件想要修改父組件傳遞過來的變量蚌本，可以使用：this.$emit這樣方法，向父組件傳遞一個事件進而在父組件調用已定義好的方法修改變量堂竟，再傳遞給子組件魂毁，這樣子組件接受的變量就改動了。
3出嘹、父組件調用子組件定義方法
? ? 剛才介紹了子組件如何調用父組件方法席楚，現(xiàn)在來說下，在父組件里調用子組件方法：
????這里用到了：this.$refs這個方法税稼，父組件引用子組件烦秩，比如（在子組件上添加 ref=“child”’這個屬性垮斯，在調用的方法的時候，添加：this.$refs.child.方法名只祠，這樣就可以了）
