fengluzheweb

一、线上地址

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

分类:

技术点:

相关文章:

  • 2021-08-30
  • 2022-12-23
  • 2021-12-28
  • 2021-04-06
  • 2022-02-15
  • 2022-12-23
  • 2022-01-11
  • 2021-12-03
猜你喜欢
  • 2021-07-03
  • 2021-12-26
  • 2021-12-24
  • 2021-10-03
  • 2021-12-03
  • 2021-11-30
相关资源
相似解决方案