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

Question

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

? Use a-la-carte components?

我在vue-cli文档中搜索过它,但没有遇到任何问题.那么有谁可以告诉我什么是"点菜组件",如果我应该使用它？

Answer 1

"点菜"是一种英语贷款短语,意思是"根据菜单".它指的是"可以作为单独的食品订购的食品,而不是套餐的一部分."

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

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插件选项.启用"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导入.

其次,直到v v v v v v v v v v v v v v v v v t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t t l 此外,自从推出"点菜组件"以来,Webpack已经发展了很多.

出于这些原因,从vuetify 1.3.0-alpha.0开始,开发团队正致力于通过vuetify-loader使用Webpack 4 树摇动功能(AKA死代码消除)来完全消除对单点组件的需求..这些功能有望被添加到vuetify官方插件中,以获得自动"点菜组件".

所以,为了解决你的第二个问题(如果你应该使用点菜),答案是否定的,不再是.以下是您可以自行设置vue-cli 3项目以使用此功能的方法:

• 将vuetify-loader安装为dev依赖项: 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...
} 

• 如果您已经使用单点菜单,请务必从您的babel插件列表中删除"transform-imports"(通常在babel.config.js中找到)

• 请记住,树摇动仅设置为在生产模式下工作,因此如果您使用旗帜--watch或--mode development使用npm run build命令,则不应期望您的捆绑尺寸减小

我希望它有所帮助