TNTWeb - The full name of Tencent News Front-end Team, the small partners in the group have practiced and accumulated in large front-end fields such as Web front-end, NodeJS development, UI design, and mobile APP.
At present, the team mainly supports the front-end development of various businesses of Tencent News. In addition to business development, it has also accumulated some front-end infrastructure to enable business efficiency improvement and product innovation.
The team advocates open source co-construction and has various technical experts. The team Github address: https://github.com/tnfe
Today, I will introduce shida to you. Project address: shida
introduce
Visual construction sounds mysterious and powerful. But he can be very simple.
With the continuous growth of short video traffic on the Internet and changes in consumption and living habits, convenient and vivid video content presentation forms have successfully won the trust of users, and users' dependence on short videos has also skyrocketed. The penetration of video visualization construction platforms is also getting stronger and stronger.
Video visualization building tools are common operational tools that allow users to quickly edit and generate videos to improve efficiency. But designing and developing such a tool from scratch is not straightforward.
The "Vision" to be introduced today provides the core functions of video visualization construction, eliminating the difficulty of implementing video visualization construction tools from scratch.
"Vision" is a video visualization construction project. You can quickly produce a short video by simply dragging and dropping, and the usage is as simple as the h5 construction tools such as Yiqixiu or Baidu H5. At present, there are few open-source projects related to video visualization construction in the industry. "Vision" is a relatively complete open-source project. I hope you like it.
The back-end video synthesis part of "Vision" is developed based on FFCreator https://github.com/tnfe/FFCreator . FFCreator is a lightweight and flexible short video processing library based on node.js. You just need to add a few pictures or video clips plus a piece of background music, and you can quickly generate a cool video clip.
The fork of the front-end part of "Vision" was quark-h5 project, and this project has not done much expansion. quark-h5 is a great open source tool for building h5, with reasonable architecture and clear and readable code, thanks to the author.
Project Preview:
Project directory
|-- client --------前端项目界面代码
|--common --------前端界面对应静态资源
|--components --------组件
|--config --------配置文件
|--eventBus --------eventBus
|--filter --------过滤器
|--mixins --------混入
|--pages --------页面
|--router --------路由配置
|--store --------vuex状态管理
|--service --------axios封装
|--App.vue --------App
|--main.js --------入口文件
|--permission.js --------权限控制
|-- server --------服务器端项目代码
|--confog --------配置文件
|--controller --------数据库链接相关
|--extend --------框架扩展
|--model -------Schema和Model
|--middleware --------中间件
|--core --------Koa MVC实现自动加载核心文件
|--views --------ejs页面模板
|--public --------静态资源
|--router.js --------路由
|--app.js --------服务端入口
|-- common --------前后端公用代码模块（如加解密）
|-- engine-template --------页面模板引擎，使用webpack打包成js提供页面引用
|-- config.json --------配置文件Editor overall design
- A component selection area, providing users to select the required components
- An edit preview artboard that provides users with the function of dragging and sorting page previews
- A component property editor that provides users with the ability to edit component internal props, public styles and animations
- The user selects a component in the component area on the left to add it to the page, and the editing area renders each element component through the dynamic component feature.
video synthesis core
- Based on
FFCreatorhttps://github.com/tnfe/FFCreator , you can quickly start working with few dependencies and low machine configuration
Development and debugging
start mongodb
- Install mongodb: https://zhuanlan.zhihu.com/p/394960855
- Configure mongodb: the configuration file is at
/server/config/index.js - Start mongodb: https://www.cnblogs.com/zhm1985/p/13111448.html
Install dependencies
npm iStart the frontend and enable watch mode
Hot update will be enabled in this mode
npm run watch-publishStart the server
npm run dev-serverAfter startup, visit http://localhost:4000 to see the project page
Register a user first, then log in to experience the operation
release deployment
start mongodb
- Install mongodb: https://zhuanlan.zhihu.com/p/394960855
- Configure mongodb: the configuration file is at
/server/config/index.js - Start mongodb: https://www.cnblogs.com/zhm1985/p/13111448.html
Need to install pm2 globally
npm install pm2 -gstart command
npm run publish && npm run start2021 has passed. A lot of things have happened at the front end this year, and some new things can even be discovered. I hope to be able to stand in the present and look at the future.
Here I quote a sentence - keep going, the future can be expected, we will continue to cultivate in the front-end field, and we also believe that if we continue to do it, we will definitely reap the due value.
team
TNTWeb - Tencent News front-end team, TNTWeb is committed to the exploration of cutting-edge technologies in the industry and the improvement of team members' personal abilities. Sorted out the latest high-quality content in the field of small programs and web front-end technology for front-end developers, updated weekly ✨, welcome star, github address: https://github.com/tnfe/TNT-Weekly
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。