Question

使用vue-cli启动新项目时，会询问几个问题来自定义设置。一般来说项目名称，描述，是否使用用于linting，业力和摩卡的用于测试的等等。这次它问我

? Use a-la-carte components?

我在vue-cli文档中搜索过它，但没有遇到任何问题。所以任何人都可以告诉我什么是＆＃34; a-la-carte组件＆＃34;如果我应该使用它？

Answer 1

À la carte是一个英语贷款短语，意思是“根据到菜单。“它指的是”可以单独订购的食物物品，而不是套餐的一部分。“

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

Vuetify example:

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 plugin选项。启用“按原样”组件时，文件/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 shaking功能（AKA无效代码）来完全消除点菜组件需求的方法。消除）到vuetify-loader。这些功能有望被添加到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)

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

代码：

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

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

如果您已经在使用单点菜单，请确保从babel插件列表中删除“ transform-imports”（通常在babel.config.js中找到）
请记住，树抖动设置为仅在生产模式下有效，因此，如果在--watch命令中使用标志--mode development或npm run build，则应该“不要期望您的捆绑包尺寸减小

我希望对您有帮助

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

2 个答案: