Что такое компоненты a-la-carte? Должен ли я использовать его?

при запуске нового проекта с помощью vue-cli он задает несколько вопросов для настройки настройки. Как правило, название проекта, описание, использовать ли eslint для линтинга,karma и mocha для тестирования и т. д. На этот раз он спросил меня 

? Use a-la-carte components?

Я искал его в документах vue-cli, но ничего не нашел. Так может ли кто-нибудь сказать мне, что такое "компоненты a-la-carte" и если я должен использовать его?

11
vue-cli-3 vuejs2 vuetify.js webpack

2 ответов

À la carte является английский язык кредит фраза значение " according в меню."Это относится к" еде, которую можно заказать как отдельную предметы, а не часть набора еды."

поэтому, если вы используете компоненты a-la-carte, это означает, что вы включаете только компоненты, которые вам нужно (хотите) использовать, вместо того, чтобы получать их все

пример Vuetify:

Vuetify позволяет легко импортировать только что вам нужно, резко снижая свой след.

import {
 Vuetify,
 VApp,
 VNavigationDrawer,
 VFooter,
 VList,
 VBtn
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   VNavigationDrawer,
   VFooter,
   VList,
   VBtn
 }
})
18

прежде всего, вы не нашли эту опцию в документах, потому что это на самом деле плагин 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
 }
})

и ваш Бабель.конфиг.файл js должен быть изменен, чтобы предотвратить полный импорт vuetify с плагином" transform-imports".

во-вторых, до vuetify v1.3.0-Альфа.0 ," a la carte" было полезно, если вы хотели минимизировать пакет поставщика webpack, но довольно утомительно выборочно импортировать компоненты vuetify, особенно во время разработки. Кроме того, Webpack сильно эволюционировал с момента введения "компонентов a la carte".

по этим причинам, начиная с vuetify 1.3.0-alpha.0, команда разработчиков работает над тем, чтобы полностью устранить необходимость в компонентах a la carte с помощью Webpack 4 дерево трясется особенности (он же мертвый код ликвидации) через vuetify-loader. Эти особенности, как ожидается, для добавления в официальный плагин vuetify, чтобы получить автоматические "компоненты a la carte".

Итак, чтобы ответить на ваш второй вопрос (если вы должны использовать a-la-carte), ответ нет, больше не буду. Вот как вы можете настроить свой проект vue-cli 3 самостоятельно, чтобы использовать эту функцию:

  • установите Vuetify-loader как зависимость от dev:npm install -D vuetify-loader
  • импорт vuetify из 'vuetify/lib' вместо 'vuetify' в вашем vuetify.Яш файл.

код:

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

Vue.use(Vuetify)
  • Регистрация Vuetify-loader в качестве плагина webpack в вашем vue.config.js file (если он не существует, создайте файл в корне вашего проекта).

код:

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

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

  • если вы уже использовали a-la-carte, обязательно удалите "transform-imports" из списка ваших плагинов babel (обычно находится в babel.конфиг.в JS)

  • помните, что встряхивание дерева настроено на работу только в производственном режиме, поэтому, если вы используете флаг --watch или --mode development С , вы shoudln не ожидайте, что ваш размер пакета должна быть уменьшена

надеюсь, это поможет

0