什么是单点组件？我应该使用它吗？

Question

当使用 vue-cli 开始一个新项目时，它会询问几个问题来自定义设置。一般是项目名称，描述，是否使用eslint做linting，karma和mocha做测试等等。这次它问我

? Use a-la-carte components?

我在 vue-cli 文档中进行了搜索，但没有找到任何内容。那么谁能告诉我什么是 "a-la-carte components" 以及我是否应该使用它？

Answer 1

À la carte is an English language loan phrase meaning "according to the menu." It refers to "food that can be ordered as separate items, rather than part of a set meal."

因此，如果您使用单点组件，则意味着您只包含需要（想要）使用的组件，而不是获取所有组件

Vuetify example:

Vuetify allows you to easily import only what you need, drastically lowering its footprint.

import {
 Vuetify,
 VApp,
 VNavigationDrawer,
 VFooter,
 VList,
 VBtn
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   VNavigationDrawer,
   VFooter,
   VList,
   VBtn
 }
})

编辑 2018/11/14：

因为 vuetify 1.3.0,
vuetify-loader（包含在 vuetify cli 安装中）
自动处理您的应用程序的单点需求，这意味着它会在您使用它们时自动导入所有 Vuetify 组件。

Answer 2

首先，您没有在文档中找到该选项，因为它实际上是一个 vuetify plugin 选项。启用 "a-la-carte" 组件后，文件 /plugins/vuetify.js 应包含：

import Vue from 'vue'
import {
 Vuetify,
 VApp,
 //other vuetify components
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   //other vuetify components
 }
})

和你的 babel.config.js 文件应该被更改以防止使用 "transform-imports" 插件进行完整的 vuetify 导入。

其次，在 vuetify v1.3.0-alpha.0 之前，如果您想最小化 webpack 供应商包，"a la carte" 很有用，但是必须有选择地导入 vuetify 组件非常乏味，尤其是在开发过程中.另外，自 "a la carte components".

引入以来，Webpack 已经发展了很多

出于这些原因，从 vuetify 1.3.0-alpha.0 开始，开发团队正在研究一种通过使用 Webpack 4 tree shaking features (AKA dead code elimination) through vuetify-loader 完全消除对单点组件的需求的方法。这些功能预计将添加到 vuetify 官方插件中，以获得自动 "a la carte components".

因此，要解决您的第二个问题（如果您应该使用单点菜单），答案是不，不再。以下是您可以自己设置 vue-cli 3 项目以使用此功能的方法：

安装 vuetify-loader 作为开发依赖：npm install -D vuetify-loader
从 'vuetify/lib' 而不是 vuetify.js 文件中的 'vuetify' 导入 vuetify。

代码：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

在您的 vue.config.js 文件中将 vuetify-loader 注册为 webpack 插件（如果它不存在，请在项目的根目录中创建该文件）。

代码：

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
   configureWebpack: {
     plugins: [
        new VuetifyLoaderPlugin(),
    ]
   }
 // ...other vue-cli plugin options...
}

如果您已经在使用 a-la-carte，请确保从您的 babel 插件列表中删除 "transform-imports"（通常在 babel.config.js 中）
请记住，tree shaking 设置为仅在生产模式下工作，因此如果您在 npm run build 命令中使用标志 --watch 或 --mode development , 你不应该期望你的包大小会减少

希望对你有帮助

什么是单点组件？我应该使用它吗？

What is a-la-carte components? Should i use it?

webpack

vuejs2

vuetify.js

vue-cli-3