web-dev-qa-db-fra.com

Qu'est-ce que les composants à la carte? Dois-je l'utiliser?

Lors du démarrage d'un nouveau projet à l'aide de vue-cli, il pose quelques questions pour personnaliser la configuration. Généralement, le nom du projet, la description, s'il faut utiliser eslint pour le peluchage, le karma et le moka pour les tests, etc. Cette fois, il m'a demandé

? Use a-la-carte components?

Je l'ai cherché dans les documents vue-cli mais je n'ai rien trouvé. Alors, quelqu'un peut-il me dire ce que sont les "composants à la carte" et si je dois les utiliser?

webpackvuejs2vuetify.jsvue-cli-3
21
Ragas

À la carte est une phrase de prêt en anglais signifiant "selon le menu". Il fait référence à "des aliments qui peuvent être commandés comme des articles séparés, plutôt que comme faisant partie d'un repas fixe".

Donc, si vous utilisez des composants à la carte, cela signifie que vous n'incluez que les composants dont vous avez besoin (voulez) utiliser, au lieu de les obtenir tous

exemple Vuetify:

Vuetify vous permet d'importer facilement uniquement ce dont vous avez besoin, ce qui réduit considérablement son empreinte.

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

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

EDIT 2018/11/14:

Depuis vuetify 1.3. ,
vuetify-loader (inclus dans l'installation vuetify cli)
gère automatiquement les besoins à la carte de votre application, ce qui signifie qu'il importera automatiquement tous les composants Vuetify au fur et à mesure que vous les utilisez.

25
Traxo

Tout d'abord, vous n'avez pas trouvé cette option dans la documentation car il s'agit en fait d'une option plugin vuetify . Lorsque les composants "à la carte" sont activés, le fichier /plugins/vuetify.js Devrait contenir:

import Vue from 'vue'
import {
 Vuetify,
 VApp,
 //other vuetify components
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   //other vuetify components
 }
})

et votre fichier babel.config.js doit être modifié pour empêcher une importation vuetify complète avec le plugin "transform-imports".

Deuxièmement, jusqu'à vuetify v1.3.0-alpha.0, "à la carte" était utile si vous vouliez minimiser votre offre de fournisseur de webpack, mais il est assez fastidieux de devoir importer sélectivement les composants vuetify, en particulier pendant le développement. De plus, Webpack a beaucoup évolué depuis l'introduction des "composants à la carte".

Pour ces raisons, à partir de vuetify 1.3.0-alpha.0, l'équipe de développement travaille sur un moyen d'éliminer complètement le besoin de composants à la carte en utilisant Webpack 4 arborescence fonctionnalités (AKA mort élimination du code) à vuetify-loader . Ces fonctionnalités devraient être ajoutées au plugin officiel vuetify afin d'obtenir des "composants à la carte" automatiques.

Donc, pour répondre à votre deuxième question (si vous utilisez à la carte), la réponse est non, plus . Voici comment configurer vous-même votre projet vue-cli 3 pour utiliser cette fonctionnalité:

  • Installez vuetify-loader en tant que dépendance de développement: npm install -D vuetify-loader
  • Importer vuetify depuis 'vuetify/lib' au lieu de 'vuetify' dans votre fichier vuetify.js.

code:

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

Vue.use(Vuetify)
  • Enregistrez vuetify-loader en tant que plugin webpack dans votre vue.config.js fichier (s'il n'existe pas, créez le fichier à la racine de votre projet).

code:

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

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

  • Dans le cas où vous utilisiez déjà à la carte, assurez-vous de supprimer "transform-imports" de la liste de vos plugins babel (généralement trouvé dans babel.config.js)

  • N'oubliez pas que le tremblement d'arbre est configuré pour fonctionner uniquement en mode production, donc si vous utilisez l'indicateur --watch ou --mode development avec votre npm run build commande, vous ne devriez pas vous attendre à ce que la taille de votre paquet soit réduite

J'espère que ça aide

7
Landry BETE