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

Question

使用 vue-cli 启动新项目时，它会询问一些问题来自定义设置。一般是项目名称、描述、是否使用 eslint 进行 linting、karma 和 mocha 进行测试等。这次它问我了

? Use a-la-carte components?

我在 vue-cli 文档中搜索了它，但没有找到任何东西。 那么谁能告诉我什么是“点菜组件”以及我是否应该使用它？

Answer 1

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

Answer 2

首先，您在文档中没有找到该选项，因为它实际上是一个 vuetify 插件 选项。当启用“点菜”组件时，文件

/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 供应商捆绑包，“点菜”很有用，但必须有选择地导入 vuetify 组件非常繁琐，尤其是在开发过程中。另外，自从引入“点菜组件”以来，Webpack 已经发展了很多。

出于这些原因，从 vuetify 1.3.0-alpha.0 开始，开发团队正在研究一种方法，通过使用 Webpack 4 tree shake 功能（又名死代码消除）来完全消除对点菜组件的需求vuetify-loader。这些功能预计将添加到 vuetify 官方插件中，以便获得自动“点菜组件”。

所以，为了解决你的第二个问题（如果你应该使用点菜），答案是不，不再是了。 以下是您如何自行设置 vue-cli 3 项目以使用此功能：

• 安装 vuetify-loader 作为开发依赖项：

  npm install -D vuetify-loader

• 从 vuetify.js 文件中的

  'vuetify/lib'

  而不是

  '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 设置为仅在生产模式下工作，因此，如果您将标志

  --watch

  或

  --mode development

  与

  npm run build

  命令一起使用，则不应期望包大小会减小

希望对你有帮助