При запуске нового проекта с использованием vue-cli он задает несколько вопросов для настройки установки. Как правило, название проекта, описание, использовать ли eslint для линтинга, карму и мокко для тестирования и т.д. На этот раз он спросил меня
? Use a-la-carte components?
Я искал его в документах Vue-Cli, но ничего не нашел. Так может кто-нибудь сказать мне, что такое "а-ля-карт" и стоит ли мне его использовать?
А ля карт - это заимствованная фраза на английском языке, означающая "согласно меню". Это относится к "еде, которую можно заказать как отдельные предметы, а не как часть комплексного обеда".
Таким образом, если вы используете компоненты по выбору, это означает, что вы включаете только те компоненты, которые вам нужны (вы хотите) использовать, вместо того, чтобы получать их все
Vuetify позволяет вам легко импортировать только то, что вам нужно, резко снижая его площадь.
import {
Vuetify,
VApp,
VNavigationDrawer,
VFooter,
VList,
VBtn
} from 'vuetify'
Vue.use(Vuetify, {
components: {
VApp,
VNavigationDrawer,
VFooter,
VList,
VBtn
}
})
РЕДАКТИРОВАТЬ 2018/11/14:
Начиная с версии 1.3.0,
vuetify-loader (входит в vuetify cli install)
автоматически обрабатывает ваши приложения по требованию, что означает, что он автоматически импортирует все компоненты Vuetify по мере их использования.
Прежде всего, вы не нашли эту опцию в документации, потому что на самом деле это опция плагина vuetify. Когда включены компоненты "по меню", файл /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 должен быть изменен для предотвращения полного импорта vuetify с помощью плагина "transform-import".
Во-вторых, вплоть до vuetify v1.3.0-alpha.0 "а-ля-карт" была полезна, если вы хотели минимизировать пакет поставщиков веб-пакетов, но довольно утомительно, чтобы выборочно импортировать компоненты vuetify, особенно во время разработки. Кроме того, Webpack сильно изменился с момента появления "а-ля-карт компонентов".
По этим причинам, начиная с vuetify 1.3.0-alpha.0, команда разработчиков работает над тем, чтобы полностью устранить потребность в компонентах а-ля-карт, используя функции встряхивания дерева Webpack 4 (удаление мертвого кода AKA) через vuetify-loader., Ожидается, что эти функции будут добавлены в официальный плагин vuetify, чтобы получить автоматические "а-ля-карт компоненты".
Итак, чтобы ответить на ваш второй вопрос (если вы должны использовать а-ля-карт), ответ - нет, больше нет. Вот как вы можете настроить свой проект vue-cli 3 для использования этой функции:
npm install -D vuetify-loader'vuetify/lib' вместо 'vuetify' в ваш файл vuetify.js.код:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
vue.config.js файле vue.config.js (если он не существует, создайте файл в корневом каталоге вашего проекта).код:
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
configureWebpack: {
plugins: [
new VuetifyLoaderPlugin(),
]
}
// ...other vue-cli plugin options...
}
Если вы уже использовали a-la-carte, обязательно удалите "transform-import" из списка ваших плагинов babel (обычно находится в babel.config.js)
Помните, что встряхивание дерева настроено на работу только в производственном режиме, поэтому, если вы используете разработку флага --watch или --mode development с командой npm run build, вы не должны ожидать, что размер вашего пакета будет уменьшен
Я надеюсь, что это помогает
Я искал тот же ответ и нашел эту ссылку на веб-сайте vuetify, который является компонентом компонентов пользовательского интерфейса для Vue.
Используя vuetify-loader, нам нужно явно импортировать компоненты и директивы? Это хорошо, чтобы импортировать снова и снова? если я ошибаюсь, поправьте меня и приведите пример, который поможет мне больше. Спасибо