视频剪辑平台

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