Comment créer un projet vue.js

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.

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!