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

vue-cli 版本 3带来了一个全新的开发体验. Vue 团队为确保创建 Vue.js 项目顺利,不需要初始配置而付出了巨大的努力。

让我们来看看新的Vie-Cli的一些特点。

<$>[警告] v3 的 vue-cli 在本文写入时仍处于 alpha 状态。

开始的

首先你需要安装它:

1$ npm install -g @vue/cli

正如你所看到的,Vue.js 现在使用范围包在@vue名称空间下分发他们的包。

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

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

这会打开一个提示,询问您是否想要默认配置(eslint,babel)或是否想添加额外的功能,例如:

TypeScript *进步式Web应用程序支持 *视图路由器 *Vuex *CSS预处理器 *Linter / Formatter *单元测试 *端到端测试

取决于您选择的选项,您将收到更多问题. 只需选择最适合您的选项. 当您完成时,依赖性将开始安装,您的项目应该准备好。

配置

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

 1[label package.json]
 2{
 3  // ...
 4  "vue": {
 5    "lintOnSave": true
 6  },
 7  "babel": {
 8    "presets": [
 9      "@vue/app"
10    ]
11  },
12  "eslintConfig": {
13    "extends": [
14      "plugin:vue/essential",
15      "eslint:recommended"
16    ]
17  },
18  "postcss": {
19    "plugins": {
20      "autoprefixer": {}
21    }
22  },
23  "browserslist": [
24    "> 1%",
25    "last 2 versions",
26    "not ie <= 8"
27  ]
28}

您可以看到一个全新的 @vue/app 包,它具有运行 Babel 配置 Vue 所需的所有内容,但您仍然可以调整它并添加您想要的任何其他配置。

根据 eslint 配置,它包含‘plugin:vue/essential’,该插件为 Vue 提供推荐的规则,然后是它的风格指南. 此外,它还包括‘eslint:recommended’,但这可能取决于您的偏好。

如果您手动选择了这些功能,您可以告诉 cli 将 config 放入单独的文件中,这将根据您的选择创建一些文件,例如.babelrc,.postcssrc, jest.config.js, tslint.json 等。

当手动选择选项时,您被问到是否希望将该配置保存为未来项目的预设。

npm 脚本

从盒子中,你将得到一个零配置的开发和生产环境,已经根据最佳实践进行设置. 开发环境包括热模块重新加载,快速构建和更多,而生产提供缩小,模块连接,代码优化等。

这是由于vue-cli-service,用于您的 package.json 文件的 npm 脚本. 在内部, vue-cli-service 具有为不同环境准备的 webpack 配置。

默认为我们提供的脚本是:

serve: "vue-cli-service serve --open"
build: "vue-cli-service build"
lint: "vue-cli-service lint". 您不需要手动运行它,如果您选择在保存上或在 commit 之前运行,它可以自动运行

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

您可以使用npm run来运行其中任何一个,例如:npm run server将启动一个 dev 服务器。

环境变量

vue-cli 使用传统.env 文件,如十二个因素应用程序所建议)。

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

1[label .env]
2VUE_APP_BASE_URI=/api
3VUE_APP_DEBUG=true

<$>[警告] 只加载以 VUE_APP_ 开头的变量,请确保您正确命名它们。

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

您还可以为每个环境定义环境变量,因此您必须添加相应的顺序,这些变量是从 NODE_ENV 变量中提取的:

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

例如,从上一个例子中,我们最好根据环境定义VUE_APP_DEBUG:

1[label .env.development]
2VUE_APP_DEBUG=true

1[label .env.production]
2VUE_APP_DEBUG=false

代理

您可以通过将一个proxy对象添加到 package.json 文件中来配置代理,以便将某些呼叫转发到开发中的特定 url:

1[label package.json]
2{
3  "proxy": {
4    "/api": "http://localhost:4000"
5  }
6}

这样,所有匹配 /\/api/ 模式的呼叫都将被转发到 http://localhost:4000

查看.config.js 檔案

默认情况下,您将在 package.json 上使用vue配置键,但您可以将此配置移到 vue.config.js 文件中。

该 vue.config.js 文件的目的是具有应用程序配置. 目前,您已经可以使用几个属性,但预计此文件将成为即将到来的功能或插件的目标:

1[label vue.config.js]
2module.exports = {
3  lintOnSave: true,
4  configureWebpack: {
5    output: {
6      path: __dirname + "/cool-build"
7    }
8  }
9};

我认为lintOnSave本身已经相当描述性。

configureWebpack键允许我们修改内部的默认 Webpack 配置,这是非常强大的,因为默认情况下,您可以为不同的环境设置最常见的功能,而没有任何配置。

将configureWebpack对象合并到内部对象中,您还可以使用接受配置为参数的函数:

1[label vue.config.js]
2module.exports = {
3  configureWebpack: config => {
4    // ...
5  }
6};

添加 CLI 插件

您可以从基本的默认配置开始,并在使用插件时添加功能. 它们都以相同的方式工作:您安装它们,然后召唤它们,它们为您完成魔法。

例如,假设您需要具有渐进式 Web 应用程序 (PWA) 功能,而您在创建项目时没有选择它。

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

插件也可以有选项,当他们被召唤时,例如,‘cli-plugin-eslint’可以用以下参数召唤:

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

包装上

您已经看到了新的Vie-cli的概述,它有一个明确的架构,使其可扩展,同时从零配置开始。

保持冷静