早在 2018 年中旬，那时候 Vue-Cl3 还处于 Beta 、RC 版本，就有在公司小项目中予以使用；它集成了更多丰富的功能，以及更多默认配置，可通过附带的图形用户界面创建、开发和管理项目，令人颇为受用，就有将先前写 Vue 项目的经验，集成进新的模板 awesome-vue-cli3-example，以便更高效和合理地构建 Web 应用程序。如今，它已成为 Vue.js 开发的标准工具，故而就在此略作分享，希冀可以为更多开发者带来些帮助。

如果您想预览此脚手架模版，可移步至：https://vue-cli3.lovejade.cn/。

功能丰富

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；
• 引入vue-meta插件以便允许您管理应用的元信息，支持 SSR + Streaming，就像react-helmet对 React 一样，它对SEO很棒。
• 开启 & 运用Jest对组件做单元测试，并附以 Demo 示例；
• 集成Prettier插件并做配置，促使团队写出更好且风格一致的代码，具体参见使用 ESLint ＆ Prettier美化Vue代码；
• 导入prerender-spa-plugin插件，使得在单页面应用程序中预呈现静态 HTML，优化 SEO 以及首屏渲染。
• 导入webpack-bundle-analyzer插件，使得运行yarn analyz，即可直观得到构建包内容，以助优化；详情参见：Webpack 打包优化之体积篇
• 导入size-plugin插件，使得在构建应用之时，可打印 Webpack 资产的 gzip 大小，以及自上次构建以来的变更。
• 导入为模块提供中间缓存步骤的hard-source-webpack-plugin插件，它使第二次构建速度明显加快。
• 将此脚手架，结合Node.js(Koa2)Nginx**MondoDb**Redis，汇融入于Docker，使 Front-End Developer 可轻松构建整个 Web 应用；目前开源于Docker Vue Node Nginx Mongodb Redis。
• 优化内置Icon(Svg) 组件，使可以接收不同方式输入，并将 Svg 提取至单独文件中，以避免资源重复加载；

需要补充说明的是，有些依赖并不是所有项目都需要的；如：prerender-spa-plugin，你知道要实现这个功能点的方法，很多；如 SSR；就实现 SEO 而言，也可以利用 Nginx 组合 Prerender，直接在服务器上处理（个人作品倾城之链）目前就是采用这种方案。在实际项目中，可根据诉求，自行决定用哪种方案。如果不启用这种在构建时候的解决方案，最好率先予以从 package.json 中移除，毕竟这个插件中依赖了 Puppeteer，这将是一个 Size 蛮大的库。

易于扩展

Vue-Cli3：它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。

此脚手架：你可以在此基础上，根据自己所需，轻易增删插件，无痛变更解决方案；推荐文章：开箱即用的 Vue Webpack 脚手架模版；如何写一手漂亮的 Vue。

无需 Eject

Vue-Cli3：Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。

此脚手架：默认对项目基本所需，已在 vue.config.js 中做了填写，参照的同时，你可自行修改。

注意事项：在vue.config.js中，已对全局样式做了预先注入，可以无需引用即可使用；对此，须要付出的代价是，一旦对预先注入的全局样式做了修改，需要重新运行项目，方可生效。

CLI 之上的图形化界面

Vue-Cli3：通过配套的图形化界面创建、开发和管理你的项目；运行如下命令即可，这个真的太棒了。

vue ui

GUI对新手来说特别有用，但即使你是一个终极极客也很难不喜欢它。你可以用它来创建一个项目、管理 CLI 插件、管理项目的依赖关系、配置项目、运行npm脚本；

即刻创建原型

Vue-Cli3：用单个 Vue 文件即刻实践新的灵感。Vue CLI3 带有疯狂的新功能。 当您想要使用组件时，您可以创建单个文件组件（.vue 文件），而不是创建新项目，并通过运行vue serve MyAwesomeComponent.vue在浏览器中提供它。您甚至可以构建组件并在需要时进行部署。

面向未来

Vue-Cli3：为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。

vue-cli-service serve

用法：vue-cli-service serve [options] [entry] 选项：

1
2
3
4
5
6

--open    在服务器启动时打开浏览器
--copy    在服务器启动时将 URL 复制到剪切版
--mode    指定环境模式 (默认值：development)
--host    指定 host (默认值：0.0.0.0)
--port    指定 port (默认值：8080)
--https   使用 https (默认值：false)

vue-cli-service serve

命令会启动一个开发服务器 (基于webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数，你也可以使用 vue.config.js 里的devServer字段配置开发服务器。

vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]

选项：

1
2
3
4
5
6
7
8
9

--mode        指定环境模式 (默认值：production)
--dest        指定输出目录 (默认值：dist)
--modern      面向现代浏览器不带自动回退地构建应用
--target      app | lib | wc | wc-async (默认值：app)
--name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
--no-clean    在构建项目之前不清除目标目录
--report      生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch       监听文件变化

vue-cli-service build会在dist/目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

这里还有一些有用的命令参数：

• --modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

• --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

• --report 和 –report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

@2018-11-21 于深圳.福田 Last Modify：2019-01-15

猜你喜欢(/对你有用)的文章

• 开箱即用的 Vue Webpack 脚手架模版
• 如何写一手漂亮的 Vue
• 所历前端“姿势”更替记(其一)
• Vue ES6 Jade Scss Webpack Gulp
• Vue Webpack 组件化开发实践
• Webpack 打包优化之速度篇
• Webpack 打包优化之体积篇