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

enxuqcxy  于 11个月前  发布在  Webpack
关注(0)|答案(2)|浏览(129)

当开始一个新的项目使用vue-software它会问一些问题来自定义设置.通常项目名称,描述,是否使用eslint的linting,karma和mocha的测试等.这一次它问我

? Use a-la-carte components?

字符串
我在vue-cartedocs中搜索了它,但是没有找到任何东西。那么谁能告诉我什么是“点菜组件”,如果我应该使用它?

uelo1irk

uelo1irk1#

À 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安装包中)
自动处理应用程序的点菜需求,这意味着它将在您使用时自动导入所有Vuetify组件。

3zwtqj6y

3zwtqj6y2#

首先,您在文档中没有找到该选项,因为它实际上是一个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.js.js文件应该被修改,以防止使用“transform-imports”插件完全导入vuetify。
第二,在vuetify v1.3.0-alpha.0之前,如果你想最小化你的webpack供应商包,“a la carte”是有用的,但是必须有选择地导入vuetify组件是相当繁琐的,特别是在开发过程中。另外,自从引入“a la carte组件”以来,Webpack已经发展了很多。
由于这些原因,从vuetify 1.3.0-alpha.0开始,开发团队正在研究一种方法,通过使用Webpack 4 tree shaking功能(也称为死代码消除)通过vuetify-loader完全消除对点菜组件的需求。这些功能预计将添加到vuetify官方插件中,以获得自动“点菜组件”。
所以,为了解决你的第二个问题(如果你应该使用点菜),答案是不,不再是。下面是你如何自己设置你的vue-tag 3项目来使用这个功能::

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

  • 如果您已经在使用点菜,请确保从您的babel插件列表中删除“transform-imports”(通常在babel.js.js中找到)
  • 请记住,tree shaking设置为仅在生产模式下工作,因此如果您在npm run build命令中使用--watch--mode development标志,则不应期望包大小会减少

我希望它能帮助

相关问题