一、線上地址
http://list.video.baidu.com/video-edit-tool/index.html
首頁、文本轉視頻、微博熱搜、我的視頻、視頻剪輯 --------> 五部分組成單頁頁面
二、技術棧
vue
vue-router 路由
vuex 數據
element-ui
webpack 打包
一個html文件
Bos存文件
二級目錄 video-edit-tool、時間戳、隨機數 防止覆蓋
wangEditor 富文本編輯器
字體選中為紅色 <---前端對html解析后傳給后端---> 該字體用【】包裹 <-------->后端
三、接口
四、實例url
微博鏈接：https://weibo.com/2773676520/H5nzEnOe4?type=comment
嗅探鏈接：https://v.qq.com/x/cover/z5107lnt4cvsusx/f0806povnku.html
五、gitlab地址
http://git.xiaodutv.com/fengluzhe_vd/video-edit-tool
六、代碼開發
vue-cli腳手架構 + webpack前端構建 配合vue-router vuex element-ui 搭建vue開發環境
src 開發目錄
page 單頁組件目錄，每一個組件對應一個頁面。
router vue-router 路由配置
store vuex組件間數據傳遞
app.vue 單頁模板
main.js 入口
dist 發布目錄
build、config 打包配置目錄
七、開發、上線
本地開發
npm run dev
打包上線
npm run build
dist目錄生成index.html文件傳入cms發布上線即可
http://icms.baidu.com:8080/video-edit-tool