一、线上地址
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