视频剪辑平台

一、线上地址

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

首页、文本转视频、微博热搜、我的视频、视频剪辑 --------> 五部分组成单页页面

二、技术栈

vue

vue-router 路由

vuex 数据

element-ui 

webpack 打包

      一个html文件

Bos存文件

       二级目录 video-edit-tool、时间戳、随机数 防止覆盖

wangEditor 富文本编辑器

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

       字体选中为红色 <---前端对html解析后传给后端--->  该字体用【】包裹 <-------->后端

三、接口

API设计

四、实例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

http://localhost:8080/#/

打包上线

npm run build 

dist目录生成index.html文件传入cms发布上线即可

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

视频剪辑平台

原文：https://www.cnblogs.com/fengluzheweb/p/10703631.html