寫在前面：
????項目地址：GitHub - jianjiayi/Merchant: vue全家桶開發商戶后臺管理，vue2.0手把手教你開發商戶管理端后臺
有什么不明白的，可以發郵件給我：m13121378101@163.com
一、簡單的初始化一個vue-cli項目。
進入一個文件夾例如pc：cd pc;
開始初始化一個vue-cli項目：
vue init webpack Merchant
等一段時間，下載完成
進入文件夾：cd Merchant
執行操作：npm run dev
在瀏覽器輸入：http://localhost:8081
到這里基本工作完成！
二、安裝element-ui,并使用UI框架搭建基本的后臺頁面。
打開element-ui官網：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::
現在重新運行：npm run dev
三、搭建后臺頁面整體布局、使用組件
先看下基本后臺布局，幾個簡單組件，這個截圖是我用iview框架搭建的，所以本項目可能與這個有所不同，但是差別不會太大。
在src目錄下新建文件目錄如下圖：
現在先編寫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，來看下結果吧！
基本樣子已經搭建好了，我們開始實現組件化吧，我們先抽離兩個組件：header.vue、slider.vue;
寫好的樣子如下圖：
home.vue代碼：
header.vue組件代碼：
再看下slider.vue組件代碼：
到這里我們的項目主頁基本寫完了，但是我們最終需要的不是靜態的頁面，是根據點擊左側菜單，顯示不同的頁面的效果，好的接下來，我們寫下路由!
四、vue-router,實現多級路由嵌套，展示不同的菜單對應的頁面
1、安裝vue-router
學習如何使用vue-router之前，建議先看下vue-router官網：Vue Router | 起步
我之前寫過一個關于vue-router多級路由嵌套的文章，希望你去看下，這里有地址：vue-router設置多級路由那些事 - 簡書
言歸正傳，開始寫代碼，這里我們不用安裝vue-router，因為在項目初始化的時候，我們安裝過了，如果沒有安裝，那就在項目根目錄下執行（安裝過的小朋友，這里就不需要了）：
cnpm install vue-router
在main.js下添加如下代碼：
importVueRouterfrom'vue-router'
Vue.use(VueRouter)；
2、創建幾個需要的路由頁面
在src/views文件下創建如下文件目錄：
user.vue添加如下代碼：（order-list.vue、goods-list.vue代碼基本一樣，就不一一列舉了）
這里值得注意的是，common/abstract.vue這個文件，這個文件是一個共用文件，代碼如下：
3、現在修改下home.vue:刪掉絲代碼，添加router-view,用來展示相關頁面
4、現在來修改src/router/index.js? 存放路由文件
寫到這里，我們去檢驗下，自己寫的路由有沒有問題，那我們重新啟動下項目：
npm run dev
在瀏覽器里輸入：
http://localhost:8080/#/goods/list
如果你看到是這樣的，那恭喜你寫的路由沒有問題了，如果不是，小朋友你可要認真看些上面的截圖了
好奇的同學就會想到了，我們要的不是在瀏覽器里輸入路由地址，我們要點擊左側菜單欄，實現切換路由呀！好的，那我們去實現這樣的功能吧！
5、slider.vue 動態的去展示所設計的的路由列表
????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提供了這種效果，我們去實現吧！
先看看效果圖：
1、修改header.vue組件，添加如下代碼：
2、修改silder.vue組件：
3、在修改下home.vue:
把幾個組件修改完，我們現在去瀏覽下是否是我們要的結果呢？重新啟動：npm run dev。
注意下，這里用到了父子組件之間通信，那么如何通信的呢？
1、父組件—>子組件：
? ? 在父組件data定義變量，在子組件props里接受這個變量。這個變量傳遞是單向的，也就說父組件變量改動了，子組件接受的變量就隨之變化；但是子組件接受的變量改變，不能引起父組件變量變化，這個vue2.0是不允許的，而且會報錯。
2、子組件—>父組件：
? ? 剛才說了，不允許子組件直接修改父組件傳遞過來的變量，那么真的不能修改了嗎？不是的。
? ? 子組件想要修改父組件傳遞過來的變量，可以使用：this.$emit這樣方法，向父組件傳遞一個事件進而在父組件調用已定義好的方法修改變量，再傳遞給子組件，這樣子組件接受的變量就改動了。
3、父組件調用子組件定義方法
? ? 剛才介紹了子組件如何調用父組件方法，現在來說下，在父組件里調用子組件方法：
????這里用到了：this.$refs這個方法，父組件引用子組件，比如（在子組件上添加 ref=“child”’這個屬性，在調用的方法的時候，添加：this.$refs.child.方法名，這樣就可以了）
