寫在前面：
項目地址：GitHub - jianjiayi/Merchant: vue全家桶開發(fā)商戶后臺管理，vue2.0手把手教你開發(fā)商戶管理端后臺
有什么不明白的胆筒，可以發(fā)郵件給我：m13121378101@163.com
一邮破、簡單介紹下要實現(xiàn)的發(fā)布系統(tǒng)功能
幾乎所有的商戶后臺都會有一套發(fā)布系統(tǒng)，無論是發(fā)布文章仆救，還是發(fā)布商品詳情都會有一套用來編輯的發(fā)布系統(tǒng)抒和，這套系統(tǒng)里包含了：上傳圖片（裁切+預(yù)覽+上傳）、上傳視頻并預(yù)覽視頻彤蔽、富文本編輯等主要功能摧莽，下面咱們就要來實現(xiàn)這個發(fā)布系統(tǒng)。一下這個預(yù)覽圖就是要實現(xiàn)的效果：
二顿痪、我們先來搭建一個基本發(fā)布系統(tǒng)頁面吧
1镊辕、在src/views/goods文件下油够，新建goods-publish.vue：
2、修改src/router/sliderPath.js 路有文件：
? ? 現(xiàn)在重新啟動破那個項目：npm run dev
? ? 在瀏覽器輸入：http://localhost:8080征懈，點開商品管理石咬，現(xiàn)在有了發(fā)布商品按鈕了吧，點擊發(fā)布商品卖哎，調(diào)轉(zhuǎn)路由如下：
3鬼悠、安裝并使用 vue-cropper裁切圖片插件：
? ? ? ? 安裝：在項目根目錄下執(zhí)行cnpm install vue-cropper
? ? ? ? 使用：在src/components文件下新建：vue-cropper.vue組件
? ? ? ? 在這里我就不多說了，不懂得看下這篇文章：基于 Vue的圖片裁剪插件 - 個人文章 - SegmentFault 思否
我就不把代碼貼出來亏娜，有點多焕窝，我貼下 裁切圖片后 將圖片以文件的形式上傳到服務(wù)器：
具體詳細的代碼，github上已經(jīng)有：vue-cropper.vue
4维贺、安裝vue-video-player視頻插件
? ? ? ? 安裝：在項目根目錄執(zhí)行:cnpm install vue-video-player
? ? ? ? 修改main.js它掂，添加如下代碼：
這里是播放視頻的組件：video-player.vue
5、添加上傳文件組件,這個就是直接使用element-ui 提供的方法：上傳文件
6溯泣、安裝百度富文本編輯器：
? ? 安裝：在這里下載一個版本的百度富文本下載
? ? 如何使用：vue+Ueditor集成 [前后端分離項目][圖片虐秋、文件上傳][富文本編輯] - <虎口脫險> - 博客園
上面這篇文章里又如何使用，以及前后端分離開發(fā)发乔，實現(xiàn)上傳圖片熟妓，要仔細看哦
7雪猪、基本安裝完好栏尚，看下效果吧！
想要的頁面基本有了只恨，但是我們現(xiàn)在還是無法上傳圖片和文件译仗！
三、安裝axios并使用
? ? 有的同學不明白axios ,希望你看看這個中文文檔：使用說明 · Axios 中文說明 · 看云
? ? 1官觅、安裝axios
在項目根目錄下執(zhí)行：cnpm install axios --save;
? ? 2纵菌、安裝完，我們開始用它：
? ? ? ? 在src文件下新建api/axios.js文件:
????????axios.js代碼如下:
如果你想問我：baseURL: '/api',//開發(fā)環(huán)境,這個什么意思休涤，先別急咱圆，一會就講到了。功氨。序苏。。捷凄。
? ? ? ? 接下來忱详，修改下main.js:
由于ueditor要求同源策略：前后端文件必須在同一個域名下，但是這就為背了前后端開發(fā)概念跺涤，這是webpack神奇提供了代理功能
? ? 那我們來配置下吧匈睁！打開config/index.js文件监透，添加如下代碼：
好了，我們重新運行下吧航唆！npm run dev;
下面是我的截圖胀蛮，上傳圖片裁切，富文本糯钙，視頻? 全部成功
這一樣醇滥，描述的有點粗糙，代碼已全部上傳github超营，如果您沒有看懂鸳玩，或者哪里不明白，可以發(fā)我郵箱哦
