視頻剪輯平臺

1、線上地址

http://list.video.baidu.com/video-edit-tool/index.html

首頁、文本轉視頻、微博熱搜、個人視頻、視頻剪輯 --------> 五部分組成單頁頁面

 

2、技術棧

vue

vue-router 路由

vuex 數據

element-ui 

webpack 打包

      一個html文件

Bos存文件

       二級目錄 video-edit-tool、時間戳、隨機數 防止覆蓋

wangEditor 富文本編輯器

       文檔：http://www.wangeditor.com/

       字體選中爲紅色 <---前端對html解析後傳給後端--->  該字體用【】包裹 <-------->後端

 

3、接口

API設計

 

4、實例url

微博連接：https://weibo.com/2773676520/H5nzEnOe4?type=comment

嗅探連接：https://v.qq.com/x/cover/z5107lnt4cvsusx/f0806povnku.html

 

5、gitlab地址

http://git.xiaodutv.com/fengluzhe_vd/video-edit-tool

 

6、代碼開發

vue-cli腳手架構 + webpack前端構建  配合vue-router  vuex element-ui 搭建vue開發環境

src 開發目錄

     page 單頁組件目錄，每個組件對應一個頁面。

     router  vue-router 路由配置

     store    vuex組件間數據傳遞

     app.vue 單頁模板

     main.js  入口

dist 發佈目錄

build、config  打包配置目錄

 

7、開發、上線

 

本地開發

npm run dev

http://localhost:8080/#/

 

打包上線

npm run build 

dist目錄生成index.html文件傳入cms發佈上線便可

http://icms.baidu.com:8080/video-edit-tool