31

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

? Use a-la-carte components?

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

4

2 回答 2

34

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

于 2017-10-11T07:32:18.567 回答
12

首先，您在文档中没有找到该选项，因为它实际上是一个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 之前，如果您想最小化 webpack 供应商捆绑包，“点菜”很有用，但是必须有选择地导入 vuetify 组件非常乏味，尤其是在开发期间。此外，自从引入“点菜组件”以来，Webpack 已经发展了很多。

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

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

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

代码：

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

Vue.use(Vuetify)
  • 将 vuetify-loader 注册为vue.config.js文件中的 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 中找到）

  • 请记住，树抖动设置为仅在生产模式下工作，因此如果您使用标志--watch或--mode development使用npm run build命令，您不应该期望您的包大小会减小

我希望它有帮助

于 2018-10-03T15:04:32.077 回答