使用新的 vue-cli 3 构建 Vue.js 应用程序

vue-cli 版本 3带来了全新的开发者体验。Vue 团队付出了巨大的努力，确保创建 Vue.js 项目顺利进行，无需初始配置。同时，还可以以简洁易行的方式扩展和调整项目配置。

让我们来看看新的 vue-cli 的一些功能。

入门

首先你需要安装它：

$ npm install -g @vue/cli

如你所见，Vue.js 现在使用作用域包在命名空间下分发它们的包@vue。

然后我们可以通过运行以下命令简单地创建一个项目：

$ vue create cli-test # cli-test is just any folder name

这将打开一个提示，询问你是否要使用默认配置（eslint，巴别塔）或者如果您想添加额外的功能，例如：

• TypeScript
• 渐进式 Web 应用支持
• Vue 路由器
• Vuex
• CSS 预处理器
• 语法检查器/格式化程序
• 单元测试
• 端到端测试

根据您选择的选项，您会收到更多问题。只需选择最适合您的选项即可。完成后，依赖项将开始安装，您的项目应该已准备就绪。

配置

vue-cli 应该已经创建了一些配置。默认配置是在包名.json它看起来像这样：

{
  // ...
  "vue": {
    "lintOnSave": true
  },
  "babel": {
    "presets": [
      "@vue/app"
    ]
  },
  "eslintConfig": {
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

您可以看到一个全新的@vue/app包，其中包含 Vue 运行所需的所有 Babel 配置。但您仍然可以对其进行调整并添加您想要的任何其他配置。

根据 eslint 配置，它包括 ，其中有遵循其样式指南的plugin:vue/essentialVue 推荐规则集。此外，它还包括，但这可能会因您的偏好而异。例如，如果您选择使用 eslint 和 prettier，那么您将获得。eslint:recommended@vue/prettier

如果你手动选择了功能，你可以告诉 CLI 将配置放在单独的文件中。这将根据你的选择创建一些文件，例如.babelrc，.postcssrc，jest.config.js，tslint.json等。您可以随时将配置移出文件，方法是将其从包名.json并将其移动到各自的配置文件。

手动选择选项时，系统会询问您是否要将该配置保存为未来项目的预设。该配置保存在〜/ .vuerc，以防万一您在某些时候需要修改它。

npm 脚本

开箱即用，您将获得一个零配置的开发和生产环境，该环境已按照最佳实践进行设置。开发环境具有热模块重新加载、快速构建等功能，而生产环境则提供压缩、模块连接、代码优化等功能。

这是由于vue-cli-service你的 npm 脚本中使用的包名.json文件。在内部，vue-cli-service 已为不同环境准备好 webpack 配置。

我们默认可用的脚本是：

• 服务：“vue-cli-service 服务--open”
• 构建：“vue-cli-service 构建”
• lint：“vue-cli-service lint”。您不需要手动运行它，如果您选择在保存时或提交之前进行 lint，它可以自动运行

如果您添加了更多功能，您可以获得一些额外的脚本：

• 测试：“vue-cli-service 测试”
• e2e : “vue-cli-service e2e”
• e2e-open：“vue-cli-service e2e：open”

你可以使用 来运行其中任何一个npm run。例如：npm run serve将启动一个开发服务器。

环境变量

vue-cli 使用传统的.env按照十二因素应用程序的建议，创建一个新的文件。这确保它遵循标准约定并与其他系统交叉兼容。

您可以定义一个.env文件如下：

VUE_APP_BASE_URI=/api
VUE_APP_DEBUG=true

process.env.VUE_APP_BASE_URI例如，它们将可以通过 加载并使用。

您还可以为每个环境定义环境变量。为此，您必须添加适当的后缀，这些后缀取自 NODE_ENV 变量：

• .env.development
• .env.production
• .env.test

他们将超越基础.env值。例如，从前面的例子来看，我们最好VUE_APP_DEBUG根据环境来定义：

VUE_APP_DEBUG=true

VUE_APP_DEBUG=false

代理人

您可以通过将对象添加proxy到包名.json文件以便将一些调用转发到开发中的特定 URL：

{
  "proxy": {
    "/api": "http://localhost:4000"
  }
}

这样，所有符合该/\/api/模式的调用都将被转发到http://localhost:4000

vue.config.js 文件

默认情况下，你vue的包名.json，但你可以将该配置移出到vue.config.js文件。

这vue.config.js文件旨在包含应用程序配置。目前，您已经可以使用一些属性，但预计此文件将成为即将推出的功能或插件的目标：

module.exports = {
  lintOnSave: true,
  configureWebpack: {
    output: {
      path: __dirname + "/cool-build"
    }
  }
};

我认为lintOnSave它本身已经非常具有描述性了。

该configureWebpack键允许我们修改内部默认的 webpack 配置。这非常强大，因为默认情况下，您可以为不同的环境设置最常用的功能，而无需任何配置。但如果您需要，您可以使用此键进行调整。在示例中，我只是更改了默认为 的输出路径/dist。

该configureWebpack对象将与内部对象合并。您还可以使用接受配置作为参数的函数：

module.exports = {
  configureWebpack: config => {
    // ...
  }
};

添加 CLI 插件

您始终可以从基本默认配置开始，然后使用插件添加功能。它们的工作方式都相同：您安装它们，然后调用它们，它们就会为您创造奇迹。

例如，假设您需要渐进式 Web 应用 (PWA) 功能，但在创建项目时未选择此功能。添加它非常简单：

$ npm install @vue/cli-plugin-pwa
$ vue invoke pwa # you don't need the @vue/cli-plugin- prefix

插件在调用时也可以有选项。例如，cli-plugin-eslint可以使用以下参数调用：

$ vue invoke eslint --config airbnb --lintOn save

总结

您已经了解了新版 vue-cli 的概述。它具有定义良好的架构，使其从零配置开始即可扩展。它还涵盖了一些常见情况，例如代理或设置环境变量。未来将有更多酷炫的功能和插件。

保持冷静？