基于 Vue-Cli3 的开箱即用脚手架模版

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2039 天前的主题，其中的信息可能已经有所发展或是发生改变。

🎉Awesome Vue-Cli3 ExamplE ：基于 Vue-Cli3 搭建的开箱即用 Vue 脚手架模版，致力于探究更高效地构建优质 Web 应用。

功能详述

Vue-Cli3：对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

此脚手架：基于 Vue-Cli3 所构建，延续早先 vue-boilerplate-template 项目所倡导，旨在探究更高效地构建优质 Web 应用（推荐阅读开箱即用的 Vue Webpack 脚手架模版）；为此，有作以下工作：

✓ 注入并配置Vue-router，使得构建单页面应用 (SPA) 变得易如反掌；
✓ 注入并配置Vuex，以方便处理应用程序开发的状态管理；
✓ 引入Element-ui，以便快速搭建网站，而无需过多关注 UI ；
✓ 引入Axios并做封装，使得更优雅处理 Http 请求；
✓ 引入Dayjs，使得以更小的代价，处理日期时间相关；
✓ 引入marked插件，并做封装，使得可以充作富文本编辑器；同时亦可借助它的解析功能，实现 Markdown 来绘制页面；
✓ 基于 Webepack 4.* 新增特性，作了优化，详见vue.config.js；
✓ 开启 & 运用Jest对组件做单元测试，并附以 Demo 示例；
✓ 集成Prettier插件并做配置，促使团队写出更好且风格一致的代码，具体参见使用 ESLint ＆ Prettier 美化 Vue 代码；
✓ 注入 prerender-spa-plugin插件，使得在单页面应用程序中预呈现静态 HTML，优化 SEO 以及首屏渲染。
✓ 注入 webpack-bundle-analyzer插件，使得运行yarn analyz，即可直观得到构建包内容，以助优化；详情参见：Webpack 打包优化之体积篇
✓ 注入size-plugin插件，使得在构建应用之时，可打印 Webpack 资产的 gzip 大小，以及自上次构建以来的变更;
✓ 将此脚手架，结合 Node.js(Koa2) Nginx MondoDb Redis，汇融入于 Docker，使 Front-End Developer 可轻松构建整个 Web 应用（目前已开源在 docker-vue-node-nginx-mongodb-redis）;
✗ 优化内置Icon(Svg) 组件，使可以接收不同方式输入，并将 Svg 提取至单独文件中，以避免资源重复加载；