https://cli.vuejs.org/zh/guide/css.html#%E5%BC%95%E7%94%A8%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90
还是基于webpack的，探索rollup及vite
Vue Cli 3.0重构原因
from Evan You(https://medium.com/@youyuxi)
(medium.com)
一般vue相关官方发布的时候，Evan You会在medium上面发文章，阐述思想，这部分还是蛮值得看的。存在什么问题，为什么要解决，怎么解决的。
https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| 尤雨溪认为，旧版本的 Vue CLI 本质上只是从 GitHub 上拉取模版，这种拉模版的方式有几个问题：
在单个模版里面同时支持太多选项，会导致模版本身变得极其复杂和难以维护，而提供多个模版一方面会让初学者无所适从，另一方面模版之间也难以共享功能或是互相迁移。
CLI 3 的解决方案是通过插件的形式，去支持多个不同的功能，一个插件对应一个功能，这样就避免了多个模版，也使得 CLI 自身的可维护性得到提升。
拉模版生成的项目，所有的 webpack 配置和构建脚本都直接包含在仓库中，一旦用户对这些部分做了修改，就很难再获得源模版的更新和升级。
CLI 3 生成的项目，核心的 webpack 配置和构建逻辑都被封装在依赖中，同时，允许用户通过配置文件来进行底层的修改。由于核心配置都被封装起来了，所以就有更多的空间去做更复杂的功能和优化，而不用担心用户的项目里面，充斥着大量和应用本身无关的构建代码。
尤雨溪表示，Vue CLI 3.0 中加入了 GUI，主要就是为了降低使用门槛，因为命令行能展示的交互很有限，所以默认用户对于创建项目时，涉及的各种工具和配置项都有了基本的了解。
而 GUI 可以提供更多的信息，帮助用户了解这些东西是干嘛的。
另外，GUI 也能提供一些命令行无法展示的信息，比如，通过可视化的图表分析打包后各个模块的大小占比等。
Vue CLI 的核心目标是为基于 webpack 4 构建的预配置提供构建设置，目标是最大限度地减少开发人员配置的次数，因此，Vue CLI 3 对具有以下特点的项目都支持开箱即用：预配置 webpack 功能，如模块热替换、代码拆分、摇树优化（tree-shaking）、高效持久化缓存等；通过 Babel 插件（Babel 7 + preset-env）对 ES2017 进行转换；支持 PostCSS（默认启用 autoprefixer）和所有主要的 CSS 预处理器；Modern mode：并行发布原生 ES2017 +bundle 和传统 bundle；多页面模式：构建具有多个 HTML / JS 入口点的应用程序；构建目标：将 Vue 单文件组件构建成为库或原生 Web 组件。
Vue CLI 的核心目标是为基于 webpack 4 构建的预配置提供构建设置，目标是最大限度地减少开发人员配置的次数，因此，Vue CLI 3 对具有以下特点的项目都支持开箱即用：预配置 webpack 功能，如模块热替换、代码拆分、摇树优化（tree-shaking）、高效持久化缓存等；通过 Babel 插件（Babel 7 + preset-env）对 ES2017 进行转换；支持 PostCSS（默认启用 autoprefixer）和所有主要的 CSS 预处理器；Modern mode：并行发布原生 ES2017 +bundle 和传统 bundle；多页面模式：构建具有多个 HTML / JS 入口点的应用程序；构建目标：将 Vue 单文件组件构建成为库或原生 Web 组件。
尤雨溪认为，以低级别形式访问 configs 具有很重要的意义，但是他不想抛弃那些“eject”的用户，所以他找出了一种无需 eject 的配置方法。
对于 Babel、TypeScript 和 PostCSS 等第三方集成来说，Vue CLI 会尊重这些工具的配置文件。webpack 用户可以使用 webpack-merge 将简单的对象合并到最终配置中，或通过 webpack-chain 进行精确定位和调整现有的加载器和插件。此外，Vue CLI 附带了 vue inspect 命令，可以帮助开发者检查内部 Webpack 配置。这样做最大的好处是，只需要微小的调整，而不需要 eject，就可以升级 CLI service 和插件进行修复或更新。尤雨溪表示，Vue CLI 3 现在可以作为 Vue 应用程序的标准构建工具，但是这仅仅是个开始，它的长期目标是将当前和未来的最佳实践融入工具链中，最终为用户提供高性能的应用程序。
|
目前npm拉包默认是4.x，5还在发alpha版本(5.0.0-alpha.7 (2021-03-11))
相关Tips
@vue/cli
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
1
2
| vue --version
npm update -g @vue/cli
|
report
https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve
transpileDependencies
1
2
3
4
5
| transpileDependencies
Type: boolean | Array<string | RegExp>
Default: false
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。
不过，对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑，你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。
|
![]()
感谢鼓励
