Découvrez les nouvelles fonctionnalités de Vue CLI 3. Découvrez comment profiter de la mise à niveau aujourd'hui.
Vue CLI, la suite d'outils de construction standard pour les applications Vue, a reçu une nouvelle version majeure (v3) il y a quelques semaines. Dans cet article, nous passerons en revue certaines des caractéristiques principales et pourquoi elles sont si importantes.
En février dernier, lors de la conférence de la conférence à Vue.js Amsterdam, Evan, vous avez parlé de Vue CLI 3 et Problèmes de la vieille vieille Vue CLI 2. Il a parlé de l'avenir de la CLI et de la manière dont elle peut aider à améliorer l'expérience de développement – en ayant à l'esprit ce dont les développeurs ont besoin: performances, facilité d'utilisation et configuration minimale.
La nouvelle version a donc été livrée pour aider les développeurs à travailler plus rapidement et à résoudre certains problèmes des versions précédentes.
Les objectifs étaient les suivants:
- Réduire la fatigue de la configuration des outils frontaux modernes, notamment lors du mélange de plusieurs outils
- Autant que possible, pratique dans la chaîne d'outils afin qu'elle devienne la valeur par défaut pour toute application Vue
Cela signifie qu'avec Vue CLI 3, vous n'avez pas à vous soucier de la configuration du pack Web, par exemple. Ici, vous pourriez penser qu’avec les modèles Vue CLI 2, la configuration était là et que vous n’aviez toujours pas besoin d’apporter des modifications. C’est vrai, mais le fichier de configuration résidait dans votre code source. Dans la nouvelle version, la configuration peut être mise à niveau tout en restant entièrement configurable.
Evan You a publié une annonce détaillée expliquant les raisons de cette mise à jour considérable et ce qui a changé le The Vue Point . Dans cet article, nous verrons ce que signifient réellement ces nouvelles fonctionnalités et comment en tirer parti.
Mise à niveau
La nouvelle interface de ligne de commande comprend un ensemble de modules de noeuds que vous pouvez mettre à jour à tout moment. Cela signifie qu’à présent, Vue CLI ne publie pas ses fichiers dans votre code source, vous n’a donc pas le fardeau de les tenir à jour.
Si vous avez déjà entendu le terme “éjecter”, il décrit la fonctionnalité d’un outil qui place la configuration ou d’autres fichiers internes dans votre projet. L’inconvénient est qu’une fois que vous avez éjecté, vous êtes autonome et vous ne pourrez pas passer à une version plus récente de l’outil à long terme.
Il est important de savoir que votre nouveau projet restera entièrement configurable.
Pour les intégrations tierces telles que Babel, TypeScript et PostCSS, Vue CLI respecte les fichiers de configuration correspondants de ces outils. Pour webpack, l'utilisateur peut utiliser webpack-merge pour fusionner des options simples dans la configuration finale, ou cibler et modifier précisément les chargeurs et plugins existants via webpack-chain . De plus, Vue CLI est livré avec la commande vue inspect pour vous aider à inspecter la configuration interne du pack Web. La meilleure partie est que vous n’avez pas besoin d’éjecter pour faire de petits ajustements, vous pouvez toujours mettre à niveau le service CLI et les plugins pour recevoir des correctifs et de nouvelles fonctionnalités. – Evan You
Inutile de configurer
Lorsque vous créez un nouveau projet avec la CLI, vous n’avez rien à configurer. Vous bénéficiez d'une prise en charge immédiate pour Babel, TypeScript, ESLint, PostCSS, PWA, les tests unitaires et les tests de bout en bout.
Vous remarquerez que, par défaut, il n'y a pas de fichier de configuration webpack. C’est formidable dans de nombreux cas, mais lorsque votre application se développe ou nécessite une configuration personnalisée, vous pouvez bien sûr tout configurer . Cela est possible grâce au fichier vue.config.js.
Le moyen le plus simple de modifier la configuration du Webpack, par exemple, consiste à fournir un objet à l'option configureWebpack dans vue.config.js.