使用新的vue-cli3搭建Vue.js应用程序

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

让我们看一下新的 vue-cli 的一些特性。

在撰写本文时，vue-cli 的 v3 仍处于 alpha 阶段。

入门

首先你需要安装它：

$ npm install -g @vue/cli

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

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

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

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

打字稿
渐进式 Web 应用程序支持
Vue路由器
Vuex
CSS 预处理器
Linter / 格式化程序
单元测试
端到端测试

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

配置

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

包.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/essential，它具有遵循其样式指南的 Vue 推荐规则集。此外，它还包括 eslint:recommended，但具体取决于您的偏好。例如，如果你选择了 eslint 和 prettier，你会得到 @vue/prettier 。

如果您手动选择功能，您可以告诉 cli 将配置放在单独的文件中。这将根据您的选择创建一些文件，例如 .babelrc、.postcssrc、jest.config.js、tslint.json、等等您可以随时移出配置文件，方法是将其从 package.json 中删除并将其移至相应的配置文件中。

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

npm 脚本

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

这要归功于在 package.json 文件的 npm 脚本中使用的 vue-cli-service。在内部，vue-cli-service 已经为不同的环境准备好了 webpack 配置。

我们默认可用的脚本有：

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

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

test: “vue-cli-service 测试”
e2e: “vue-cli-service e2e”
e2e-open: “vue-cli-service e2e:open”

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

环境变量

vue-cli 使用传统的 .env 文件，正如十二因素应用程序所建议的那样。这确保它遵循标准约定并与其他系统交叉兼容。

您可以按如下方式定义 .env 文件：

.env

VUE_APP_BASE_URI=/api
VUE_APP_DEBUG=true

仅加载以 `VUE_APP_` 开头的变量。确保正确命名它们。

例如，它们将被加载并使用 process.env.VUE_APP_BASE_URI。

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

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

它们将覆盖基本 .env 值。例如，从前面的例子中，我们最好根据环境定义VUE_APP_DEBUG：

.env.development

VUE_APP_DEBUG=true

.env.production

VUE_APP_DEBUG=false

代理

您可以通过将 proxy 对象添加到 package.json 文件来配置代理，以便将一些调用转发到开发中的特定 url：

包.json

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

这样，所有匹配 /\/api/ 模式的调用都会被转发到 http://localhost:4000

vue.config.js 文件

默认情况下，您的 package.json 上会有一个 vue 配置键，但您可以将该配置移出到 vue.config.js 文件中。

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

vue.config.js

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

我认为 lintOnSave 本身已经很有描述性了。

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

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

vue.config.js

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

添加 CLI 插件

您始终可以从基本默认配置开始，并使用插件随时添加功能。它们都以相同的方式工作：您安装它们，然后调用它们，它们会为您施展魔法。

例如，假设您需要具有 Progressive Web App (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 的概述。它具有定义明确的体系结构，使其在从零配置开始时可扩展。它还涵盖了一些常见情况，例如代理或设置环境变量。期待未来有更多酷炫的功能和插件。

保持冷静🦄