Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-12 14:49:13
original
1513 Les gens l'ont consulté

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
Copier après la connexion

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
Copier après la connexion

Emballez et compilez

$ npm run build
Copier après la connexion

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
Copier après la connexion

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!

Étiquettes associées:
vue
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!