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

Question

使用 vue-cli 开始一个新项目时，它会询问一些问题以自定义设置。通常包括项目名称、描述、是否使用 eslint 进行代码检查，是否使用 karma 和 mocha 进行测试等。这次它问了我

? Use a-la-carte components?

我在vue-cli的文档中搜索了它，但没有找到任何信息。那么有人能告诉我什么是“按需引入组件”，以及我是否应该使用它吗？

- Ragas

---

通常，“a-la-carte” 表示从某个更大的东西中取出一部分。最简单的例子是 John Leider 的 vuetify 库，你可以获取整个库，或者通过仅获取所需组件来进行“a-la-carte”，而不必获取整个库。例如，你只需要按钮组件和文本字段组件。希望这能帮到你。 - jofftiquez

Answer 1

À la carte 是一个英语借词短语，意思是“按照菜单”。它指的是“可以作为单独项目点菜的食物，而不是套餐的一部分”。

因此，如果使用a-la-carte组件，则意味着您只包括您需要（想要）使用的组件，而不是获取所有组件。

Vuetify示例:

Vuetify允许您轻松地仅导入所需内容，从而大大降低了其占用空间。

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 组件。

- Traxo

Answer 2

首先，您没有在文档中找到该选项，因为它实际上是vuetify插件选项。当启用“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之前，“a la carte”对于最小化webpack供应商包非常有用，但是在开发过程中必须选择性地导入vuetify组件非常繁琐。此外，自从“a la carte components”引入以来，Webpack已经发展了很多。

基于这些原因，从vuetify 1.3.0-alpha.0开始，开发团队正在通过vuetify-loader使用Webpack 4 tree shaking特性（也称为死代码消除）来完全消除对a la carte组件的需求。预计将在vuetify官方插件中添加这些功能，以获得自动的“a la carte components”。

因此，回答你的第二个问题（是否应该使用a-la-carte），答案是不再需要。以下是如何自己设置vue-cli 3项目以使用此功能：

• 将vuetify-loader作为dev依赖项安装：npm install -D vuetify-loader
• 在vuetify.js文件中从'vuetify'导入vuetify，改为从'vuetify/lib'导入。

代码:

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 插件列表（通常在 babel.config.js 中找到）中删除 "transform-imports"

• 请记住，tree shaking 仅在生产模式下运行，因此，如果您在使用 npm run build 命令时带有标志 --watch 或 --mode development，则不应期望减小捆绑包大小

希望这有所帮助

- LeCodex

---

为什么在你的vuetify.js文件中要使用'从'vuetify/lib'导入vuetify'而不是'vuetify'？ - Raymundus