Vue CLI 3.0

Vue CLI 3.0

作者：Evan You | 译：大熊
原文地址： （https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb）

在过去的几个月里，我们一直在努力开发下一代Vue CLI，这是Vue应用程序标准构建工具链。今天，我们非常高兴地宣布发布Vue CLI 3.0及其令人兴奋的功能。

丰富的内置功能

Vue CLI与之前的版本完全不同。重写的目的有两个：
1. 减少现代前端工具的配置疲劳，特别是在将多个工具混合在一起时；
2. 尽可能在工具链中加入最佳实践，因此它成为了任何Vue应用程序的默认实践。

Vue CLI的核心提供一个预配置，是基于webpack 4构建的。我们的目标是最大限度的减少开发人员必须经历的配置，因此任何Vue CLI 3项目都带有开箱即用的支持：

• 预先配置的webpack功能，例如： hot module replacement, code-splitting, tree-shaking, efficient long term caching, error overlays等。
• 通过Babel7 + preset-env进行ES2017转换（加上对象静止扩展和动态倒入的常见的建议）和基于使用情况的polyfill注入
• 支持PostCSS（默认启用autoprefixer）和所有主要的CSS预处理器
• 使用哈希资源链接和预加载/预读取资源提示自动生成HTML
• 通过.env文件的模式和级联环境变量
• Modern模式：并行发布原生ES2017+bundle和传统bundle（详情在下面）
• Multi-page模式：构建具有多个HTML/JS入口的应用程序
• 构建目标：将Vue单文件组件构建到库里或者本地web组件中（详情在下面）

此外，您可以在创建新项目时混合使用许多可选集成，例如：

• TypeScript
• PWA
• Vue Router & Vuex
• ESLint/TSLint/Prettier
• 通过Jest或者Mocha进行单元测试
• 通过Cypress或者Nightwatch进行E2E测试

根据需要选择

最重要的是，Vue CLI确保所有上述的功能可以很好的工作，这样您就不必自己做这些事。

可配置无需弹出

上面列出的所有功能都可以零配置：当您通过Vue CLI 3构建项目时，它会安装Vue CLI运行时服务（@ vue / cli-service），所选功能插件，并生成必要的配置文件您。在大多数情况下，您只需要专注于编写代码。

但是，试图抽象掉底层依赖关系的CLI工具通常会剥离对这些依赖关系进行微调的内部配置的能力 - 为了进行这样的更改，用户通常必须“弹出”，即检查原始配置到项目，以便进行更改。这样做的缺点是，一旦你弹出，你就可以自己动手，从长远来看，无法升级到更新版本的工具。

我们承认能够更低级别访问配置的重要性，但我们也不想让被驱逐的用户抛弃，所以我们已经找到了一种方法来调整配置的几乎所有方面而不会弹出。

对于Babel，TypeScript和PostCSS等第三方集成，Vue CLI会尊重这些工具的相应配置文件。对于webpack，用户可以利用webpack-merge将简单选项合并到最终配置中，或者通过webpack-chain精确定位和调整现有的加载器和插件。此外，Vue CLI附带vue inspect命令可帮助您检查内部Webpack配置。最好的部分是，您不需要弹出只是为了进行小的调整 —— 您仍然可以升级CLI服务和插件以接收修复和新功能。

使用 webpack-chain调整html-webpack-plugin的选项

可扩展插件系统

我们希望Vue CLI成为社区可以构建的平台，因此我们从第一天开始就使用插件架构设计新版本。Vue CLI 3插件可以非常强大：它可以在应用程序的脚手架阶段注入依赖项和文件，并调整应用程序的webpack配置或在开发期间向CLI服务注入其他命令。大多数像TypeScript这样的内置集成都使用相同的插件API实现为插件，所有插件API都可用于所有社区插件。如果您有兴趣编写自己的插件，请查看插件开发指南。

在Vue CLI 3中，我们不再拥有“模板” —— 相反，您可以创建自己的远程预设，与其他开发人员共享您选择的插件和选项。

感谢Guillaume CHAU的出色工作，Vue CLI 3附带了一个完整的GUI，不仅可以创建新项目，还可以管理项目中的插件和任务（是的，它甚至还带有下面显示的花哨的webpack仪表板）：

不需要Electron——只需用‘vue ui’启动

注意：虽然Vue CLI 3发布稳定，但UI仍处于测试阶段。期待在这里和那里有一些怪癖。

即时原型

在你编写任何代码之前等待 npm install 并不好玩，时我们只需要即时访问工作环境即可获得灵感的火花。使用Vue CLI 3的vue serve命令，您只需要开始使用Vue单文件组件进行原型设计：

使用‘vue serve’进行即时原型设计

原型开发服务器具有相同的标准应用程序设置，因此您可以轻松地将原型*.vue文件移动到正确的脚手架项目src文件夹中以继续处理它。

多功能和未来准备

Modern模式

使用Babel，我们可以利用ES2015 +中的所有最新语言功能，但这也意味着我们必须提供转换和polyfilled包以支持旧版浏览器。这些转换后的包通常比原始的本机ES2015 +代码更冗长，并且解析和运行速度也更慢。鉴于今天大多数现代浏览器都对原生ES2015 +提供了不错的支持,这对于这些浏览器来说是一种浪费的更重且效率更低的代码,仅仅是因为我们必须支持这些比较老的代码。

Vue CLI提供“Modern模式”来帮助您解决此问题。使用以下命令构建生产时：

vue-cli-service build --modern

Vue CLI将生成两个版本的应用程序：一个针对支持ES模块的现代浏览器的现代软件包，以及一个针对不支持ES模块的旧版浏览器的旧版软件包。

但很酷的部分是没有特殊的部署要求。生成的HTML文件自动采用Phillip Walton的优秀帖子中讨论的技术：

• modern 包在支持他的浏览器中使用<script type="module">加载；他们也会用<link rel="modulepreload">预加载。
• 旧版包用<script nomodule>加载，支持ES模块的浏览器会忽略该捆绑包。
• 一个对于修复 <script nomodule>程序在Safari 10也会自动注入

对于Hello World应用程序，modern包已经缩小了16％。在生产中，modern 包通常会显着加快解析和评估速度，从而提高应用程序的加载性能。最好的部分？它所需要的只是一个--modern命令行标志。

我们没有将modern模式作为默认设置的原因是，如果您使用CORS / CSP，则需要更长的构建时间和一些额外的配置。

构建为Web组件

您可以将Vue CLI 3项目中的任何*.vue组件构建到Web组件中，其中包括：

vue-cli-service build --target wc --name my-element src/MyComponent.vue

这将生成一个JavaScript包，它将内部Vue组件包装并注册为页面上的本机自定义元素，然后可以将其简单地用作<my-element>。消费页面确实需要在页面上包含Vue作为全局，但除此之外，Vue完全隐藏实现细节。

您甚至可以将多个*.vue组件构建到具有多个块的代码拆分包中：

vue-cli-service build --target wc-async 'src/components/*.vue'

通过在生成的包中包含一个小的入口文件，它将所有组件注册为本机自定义元素，但仅在页面上首次实例化相应的自定义元素时才获取底层Vue组件的代码。

· · ·

今天试试吧！

Vue CLI 3现在可以作为Vue应用程序背后的标准构建工具，但这仅仅是个开始。如上所述，Vue CLI的长期目标是将当前和未来的最佳实践融入工具链。我们希望随着Web平台的发展，Vue CLI可以继续帮助其用户提供高性能的应用程序。

您可以按照文档中的说明立即尝试。我们迫不及待地想看看你用它构建了什么。Happy hacking!