为什么要在 Babel 和 ESLint 上使用 Vue CLI？

Question

我刚开始使用 Node.js 和 Vue.js，我注意到 Vue.js 有一个 Vue CLI 工具包（不管这意味着什么），它为您提供了一个脚手架项目（我认为不需要它？）但它还添加了 ESLint 和 Babel。

问题是，它像这样添加它们：

"plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
}

Vue 的 Babel @vue/cli-plugin-babel和使用 NPM 安装 Babel 有什么区别？ 为什么vue add cli-plugin-eslint而不是npm install eslint ？

Answer 1

最重要的区别是 Vue CLI（及其插件）不仅为您的项目添加工具，还为添加的工具（webpack/babel/eslint 等）提供合理的默认配置（同时仍允许您进行微调）它）

所以你可以花更多的时间来开发你的应用程序，而不是弄清楚如何设置开发/生产构建工具链......

Babel 和 ESLint 等工具配置为与 Vue 一起使用，但这并不意味着它们仅适用于 Vue 特定功能（例如 Vue 单文件组件）。 你可以将纯 JavaScript 文件添加到你的项目中，Babel 和 ESLint 仍然可以使用它。

您可以为此使用一些boilerplate或模板，但 Vue CLI 更好，因为它允许在整个项目生命周期内对工具和配置进行无缝更新（而不是在开始时为您生成结构和配置，并将未来的更新留给您）。

例如，假设您的项目在 VUE 单文件组件中使用 SASS。 为此，您需要一个sass-loader Webpack 插件。 然后sass-loader维护者决定他们需要改变他们的配置结构（ 最近发生的）。 如果您的项目基于某种模板，您可以更新到较新版本的sass-loader但您还需要弄清楚需要对配置进行哪些更改才能使其再次运行。 如果您正在使用 Vue CLI（并且 CLI 团队决定更新到最新版本的sass-loader ），您只需更新 Vue CLI（或它的插件）就可以了（因为 Vue CLI 团队中的某个人知道需要做什么）更改并完成了）

如果您刚开始使用 Node/Vue，强烈建议您将项目基于 Vue CLI，而不是尝试从头开始......