您将看到，Vue CLI 3在灵活性和易用性方面都是一个重大飞跃。它为您的Vue项目提供了对来自前端世界的最佳构建工具的即时访问，将它们与合理的默认值无缝地结合在一起。同时，它允许简单的配置和定制，以满足您的特定需求。
为了实现这一点，Vue CLI 3采用了一种新的基于插件的体系结构，有别于版本1和版本2中基于模板的体系结构。在这种新的架构下，项目配置被孤立在独立的插件中，一个用于TypeScript，一个用于ESLint等等。
下面是一些关于Vue CLI 3你会喜欢的东西:
没有锁定，因为插件可以在开发生命周期的任何位置添加
零配置插件允许您花时间开发而不是配置
易于升级，因为配置可以在不“Ejecting”的情况下自定义
允许开发人员制作自己的插件和预置
最后但并非最不重要的是，Vue CLI 3将您从一个空白画布快速带到一个正在运行的服务器，允许您仅使用一个. Vue文件原型化一个项目。
插件架构
Vue CLI 3项目的基本配置是基本的Webpack和Babel。所有附加功能都可以通过插件添加，插件可以通过以下一种或多种方式增强项目配置:
更改Webpack配置(例如添加一个新的加载器)
改变package.json（例如添加脚本）
更改项目树中的其他文件(例如，将标记注入index.html)
官方的Vue CLI 3插件包括Typescript, PWA, Vuex, Vue路由器，ESLint，单元测试等等。当然，这些插件提供了开箱即用的最佳实践配置。
安装插件
在Vue CLI 3项目中安装插件可以通过在项目初始化期间提供的交互提示来完成:
但是，您可以使用CLI命令vue add my-plugin在项目生命周期中的任何时候安装附加插件。这意味着您不受限于在开发开始时所做的选择。
如果您想要为每个项目使用一组最喜欢的插件首选项，例如Vuex，TypeScript和带有Airbnb配置的ESLint，Vue CLI 3允许您将这些首选项保存在本地存储的预设文件中~/.vuerc。现在，您可以立即启动完美配置的项目！
Webpack
任何工具软件中最重要的是处理Webpack。
当您安装第一个Vue CLI 3项目并看到项目根目录中没有webpack.config.js时，您可能会松一口气。这是因为Vue CLI 3的大多数项目配置都被抽象到插件中，并在运行时合并到基本配置中。
可以通过新的vue.config.js文件调整Webpack配置。例如，如果您想添加一个Webpack插件(不要与Vue CLI插件混淆)，请将必要的代码放入configureWebpack属性中。
vue.config.js
module.exports = {
configureWebpack: {
// Merged into the final Webpack config
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}如果您需要获得更好的体验，Vue CLI 3为Webpack配置提供了其他几个API，允许您直接改变它，或使用强大的webpack-chain。
注意:Webpack配置在插件和vue.config.js之间是分开的。要查看运行时配置，请使用命令vue inspect。
自定义插件
插件可以提供自己的配置选项，这些选项通过vue.config.js的pluginOptions属性指定。例如，如果您使用vue- clip -plugin-critical来提取关键的CSS，您可以像这样指定页面宽度和高度:
module.exports = {
pluginOptions: {
critical: {
width: 375,
height: 565
}
}
}如果你想对你的项目配置做更多实质性的改变，或者你想在多个项目中重复同样的改变，你可以抽象成你自己的定制插件。然后，如果您想与其他开发人员共享，您可以在NPM上发布这篇文章。
这种可扩展性在基于模板的Vue CLI 2体系结构中是可能的，因为您可以简单地派生其中一个模板并添加更改。但是，这个系统有两个严重的瓶颈:
任何上游的更新或bug修复都必须手工合并到分叉的模板中，这使得维护起来非常困难。
每个项目只能有一个模板。如果您想在项目中包含来自多个模板的特性，该怎么办?您最终将不得不使用您想要的每一种排列和特性组合来创建自己的模板，从而加剧了前面的问题。
正是由于这些原因，第三方的Vue CLI 2模板从未真正流行起来。Vue CLI 3已经明确地克服了这些限制，所以我预测除了官方的插件之外，还会出现许多很酷的第三方插件。
没有“Ejecting”
“Ejecting”是Create React App中的术语，指的是将所有配置和构建依赖项从scripts文件夹(请考虑插件)移到项目中直接放置的过程。
这样做是为了允许直接编辑配置。不过，它是一个非常不灵活的系统，因为它是不可逆转的，并且阻止您接收对脚本的升级，即使您只需要编辑一个脚本。
从Create React App中弹出
这里是Vue CLI 3的最高成就:插件和配置api的灵活性意味着不需要弹出Vue CLI 3项目。因此，Vue CLI 3项目将在整个生命周期中保持可升级性。
快速原型设计
如果你像我一样，有时候你会被一个很酷的想法所震撼，以至于你需要放下其他的一切，直接去做原型。但如果你不得不花半个小时修改Webpack和Babel配置，然后才能在屏幕上看到任何东西，这真的会破坏你的情绪。
Vue CLI 3让从零开始到提供服务的应用程序的速度快得令人难以置信。它包括一个Webpack开发服务器，带有热模块重新加载和所有其他你可能会想到的花哨功能。
更好的是，如果Vue CLI 3是全局安装的，那么您可以提供.js或. Vue文件，而不依赖于本地。这允许您做如下事情:
echo '<template><h1>Hello!</h1></template>' > App.vue vue serve
你会立刻在屏幕上有一个Vue项目。
第一次使用vue项目
结论
我在这里介绍的只是Vue CLI 3中的一些新特性。还有很多其他好吃的东西，比如:
通过.env文件在项目中使用环境变量。
使用命令vue- clip -service Build—target wc—name my-element [entry]将项目构建为web组件，以便在任何其他JavaScript项目中使用。
DLL模式，将您的NPM依赖项构建到一个单独的供应商包中，从而提高未来构建的构建时间
英文原文地址：https://vuejsdevelopers.com/2018/03/26/vue-cli-3/
以上就是Vue CLI 3:前端开发的游戏规则改变者的详细内容，更多请关注0133技术站其它相关文章！
