Maison  >  Article  >  interface Web  >  Comment configurer l'échafaudage Vue à l'aide de Parcel (tutoriel détaillé)

Comment configurer l'échafaudage Vue à l'aide de Parcel (tutoriel détaillé)

亚连
亚连original
2018-06-12 14:49:131522parcourir

parcel-vue est une solution d'échafaudage de développement rapide VueJS basée sur l'outil d'empaquetage Parcel. Il est fortement recommandé d'utiliser node8.0 ou supérieur. Cet article vous présentera les connaissances pertinentes du nouvel outil d'emballage Parcel-vue, une solution d'échafaudage de développement rapide sans configuration. Les amis intéressés devraient jeter un œil à

parcel-vue, une solution d'échafaudage de développement rapide VueJS basée sur le. Outil d'emballage de colis, fortement Il est recommandé d'utiliser node8.0 ou supérieur

Adresse du projet : https://github.com/w3c-king/parcel-vue

Initialiser le projet

$ git clone https://github.com/w3c-king/parcel-vue.git

Dépendances d'installation

$ cd parce-vue
$ npm install

où parcel-bundler est l'outil principal, pour les fichiers uniques se terminant par vue, le type de fichier doit être traité séparément. Le plugin parcel-plugin-vue générera le code correspondant via vueify, et colis chargera automatiquement le code. dépendances commençant par parcel-plugin.

Exécutez l'environnement de développement et ouvrez le navigateur http://localhost:1234 après une opération réussie pour afficher le projet

$ npm run dev

Emballez et compilez

$ npm run build

Développement

Structure des répertoires

src
├── router
 ├── index.js
├── assets
 ├── logo.png
├── components
 ├── Hello
 ├── index.js
 ├── index.js
├── views
 ├── HelloWorld
  ├── images
   ├── logo.png
  ├── HelloWorld.vue
├── styles
 ├── common.css
├── store
 ├── global
  ├── global.js
  ├── index.js
 ├── index.js
├── app.vue
├── index.js

Il vous suffit d'exécuter npm run dev et npm run build pour développer et construire.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter l'optimisation du packaging du projet webpack2 dans vue-cli

La différence entre l'exportation et l'exportation par défaut dans es6 Lesquels sont là ?

Comment implémenter un carrousel d'images en encapsulant Swiper dans Vue

Comment utiliser ztree dans vue (tutoriel détaillé)

Comment implémenter le plug-in de flux en cascade à l'aide de JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn