Maison  >  Article  >  interface Web  >  Comment créer un projet vue.js

Comment créer un projet vue.js

青灯夜游
青灯夜游original
2020-12-25 10:56:0213379parcourir

Méthode : installez d'abord node et cnpm ; puis utilisez la commande "npm install --global vue-cli" pour installer vue-cli ; puis utilisez la commande "vue init webpack project name" pour créer le projet ; entrez enfin dans le répertoire du projet, utilisez la commande "cnpm i" pour installer les dépendances.

Comment créer un projet vue.js

Recommandations associées : "Tutoriel vue.js"

L'environnement d'exploitation de ce tutoriel : système windows7, vue2 .9, ordinateur Dell G3.

1. Installer l'environnement de nœud

 1. fr /

 2. Vérifiez si l'installation a réussi : si le numéro de version est affiché, cela signifie que nous avons installé l'environnement de nœud avec succès

 

 3. Afin d'améliorer notre efficacité, nous pouvons utiliser l'image de Taobao : http://npm.taobao.org/

Entrez : npm install -g cnpm –registry=https://registry.npm.taobao.org pour installer l'image npm partout où se trouve npm. utilisé à l'avenir, utilisez cnpm directement à la place.

 

Vérifiez si l'installation a réussi :

 1. Installez globalement vue-cli npm install --global vue-cli

 

<span class="line">npm install --global vue-cli</span>

 2. Entrez votre projet répertoire,

Créez un nouveau projet basé sur le modèle webpack :

 vue init webpack 项目名  Instructions :

 Vue build ==> Méthode d'empaquetage, appuyez simplement sur Entrée

 Installer vue-router = => Voulez-vous installer vue-router Vous devez l'utiliser dans le projet, donc Y et appuyez sur Entrée ; ;

 Configurer les tests unitaires ==> S'il faut installer des outils de tests unitaires Nous n'en avons pas besoin pour le moment, alors appuyez sur Entrée

  Configurer les tests e2e avec Nightwatch == > Si des tests de bout en bout sont nécessaires Nous n'avons pas besoin de l'outil pour le moment, alors appuyez sur Entrée

3. Entrez le projet : cd vue-demo, installez les dépendances

Après une installation réussie, le dossier du projet Il y aura un répertoire supplémentaire : node_modules

4. npm run dev, démarrez le projet

Le projet démarre avec succès :

3. Explication du répertoire du projet vue

 

 <br>1. répertoire

1) build.js = => Script de construction de l'environnement de production ;

 2) check-versions.js ==> Vérifiez la version de npm, node.js

<br> 3) utils.js ==> ;

 4) vue-loader.conf.js ==> Configurez le chargeur CSS et ajoutez automatiquement des préfixes après la compilation du CSS

5) webpack.base.conf.js ==> Configuration de base de Webpack ;

6) webpack.dev.conf.js ==>

7) webpack.prod.conf.js ==>Configuration de l'environnement de production Webpack

 2.config : configuration du projet

 1) dev.env.js ==> Variables d'environnement de développement

 2) index.js ==> ) prod.env.js ==> Variables d'environnement de production ;

3. node_modules : modules dépendants du projet chargés par npm

4. src : Voici le répertoire que nous voulons développer, en gros. Tout ce que vous devez faire se trouve dans ce répertoire. Il contient plusieurs répertoires et fichiers :

1) actifs : répertoire de ressources, où sont placées certaines images ou public js ou public css. Les ressources ici seront construites par webpack ;

2) composants : répertoire des composants, les composants que nous écrivons sont placés dans ce répertoire

3) routeur : routage frontal, la route que nous écrivons ; besoin de configurer Le chemin est écrit dans index.js ;

4) App.vue : composant racine

5) main.js : fichier js d'entrée

5 . static : répertoire de ressources statiques, tel que des images, des polices, etc. Ne sera pas construit par webpack

6. index.html : fichier d'entrée de la page d'accueil, vous pouvez ajouter des méta-informations, etc.

7. package.json : fichier de configuration du package npm, définit le script npm du projet, les packages dépendants et autres informations

<br> 8. README.md : document de description du projet, format markdown

9. Fichiers .xxxx : Ce sont quelques fichiers de configuration , y compris la configuration de la syntaxe, la configuration de git, etc.

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation

 ! !

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
Article précédent:Qu'est-ce que vue-mobileArticle suivant:Qu'est-ce que vue-mobile