前言想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面，除了感叹其神奇之处有没有想过其实现方式呢？本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤，并开源前后端代码。有需要的小伙伴可以按照该教程从零实现自己的H5编辑器。
模板基于vue-cli4 和 Vant-ui 搭建，进行大型 H5 项目开发最佳实践方案，让我们来一探究竟项目结构本项目已经为你生成了一个完整的开发框架，下面是整个项目的目录结构。├── .github # git log
一、基础打包过程1、整理思路相信有很多公司，用习惯老式的ERP系统，将软件UI固化为WINDOWS桌面端的应用程序。你将一个Element项目摆在他的面前，他看不惯！他想让你的Web项目封装为一个客户端！是的，你没听错！我们的目的，就是将Web项目封装成一个客户端！
第三步、打包命令配置。通过 ./node_modules/webpack/bin/webpack.js --config webpack.config.js 这条命令来进行打包，除了使用 --config 配置参数外，还可以通过 --help 查看其它命令参数:为了避免每次都要写 ./node_modules/webpack/bin/webpack.js --config webpack.config.js 这么一长串的命令，可以使用 npm scripts 来简化操作，修改 package.json 中的 scripts 属性，添加 build，执行命令npm run bulid 即可进行打包:“scripts”: {。“build”: “npx webpack --config webpack.config.js”
BootstrapVue 拥有85个以上的组件，45个以上的可用插件，多个指令和670+个图标， 它提供了可用于Vue.js v2.6的Bootstrap v4.5组件和网格系统的最全面的实现之一 ，并具有广泛的功能和自动 WAI-ARIA 可访问性标记。
Element Plus 使用 TypeScript + Composition API 进行了重构，提供完整的类型定义文件，使用 Vue 3.0 Composition API 降低耦合、简化逻辑，使用 Lerna 维护和管理项目，完善了 52 种国际化语言支持，支持了黑暗模式。
