Cet article présente principalement webpack + vue + node pour créer une seule page (pour commencer). Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
Adresse de téléchargement 1.node : http://nodejs.cn/download/, vérifiez la version du nœud et de npm une fois l'installation terminée
![](https://img.php.cn/upload/article/000/054/025/ca5046ce545d474e9ceeb3eedbb47a46-0.png)
2. Miroir Taobao : npm install cnpm -g --registry=https://registry.npm.taobao.org Le miroir Taobao est beaucoup plus rapide que npm Vous pouvez utiliser directement cnpm au lieu de npm
<.>
3. Installez vue-cli : cnpm install -g vue-cli
Installez le webpack : cnpm install -g webpack
-g signifie installation globale
Processus de programmation Si vous devez introduire un module, vous pouvez cnpm installer
--savePar exemple, si vous devez installer le module de routage vue-router, utilisez simplement le cnpm d'échafaudage install vue-router --save
![](https://img.php.cn/upload/article/000/054/025/639807f85aba31f130dd233e0816fb68-2.png)
![](https://img.php.cn/upload/article/000/054/025/639807f85aba31f130dd233e0816fb68-3.png)
4. Construisez l'application vue de webpack : vue init webpack
![](https://img.php.cn/upload/article/000/054/025/639807f85aba31f130dd233e0816fb68-4.png)
Spécial ici Mentionnez webpack Lors de l'installation du modèle webpack plus tôt, il était possible d'utiliser ESLint pour standardiser votre code ESLint peut être une mauvaise nouvelle pour les amis. qui ne font pas beaucoup attention à l'indentation du code. Veuillez le modifier un peu le code du programme, si l'indentation ne répond pas aux normes, ou même les espaces peuvent provoquer un tas de putains d'erreursIndiquez la vue-cli. modèle. Le modèle vue-cli est divisé en modèle officiel, modèle personnalisé et modèle localLes modèles officiels sont divisés en
- browserify -- Browserify + vueify avec avancé fonctions pour le développement officiel
- browserify-simple -- Browserify + vueify avec des fonctions de base pour un développement rapide
- simple -- HTML unique pour développer le Application Vue.js la plus simple
- webpack -- Webpack avec fonctions avancées + vue-loader pour le développement formel
- webpack-simple -- Webpack avec fonctions de base + vue-loader pour un développement rapide
5. Dépendances d'installation d'échafaudage
![](https://img.php.cn/upload/article/000/054/025/639807f85aba31f130dd233e0816fb68-5.png)
6. Exécutez-le directement pour voir l'effet.
![](https://img.php.cn/upload/article/000/054/025/a242a37ee2cbd9317b0401d08cf59e29-6.png)
![](https://img.php.cn/upload/article/000/054/025/a242a37ee2cbd9317b0401d08cf59e29-7.png)
PS : j'ai écrit une démo qui combine le routage, l'imbrication de routage, le sous-routage, l'acquisition de données inter-domaines à distance, le bootstrap et autres fonctions Le code a été téléchargé sur le mien github, adresse : https://github.com/LeonardLmyt/learngit/tree/master/vue-single-page
![](https://img.php.cn/upload/article/000/054/025/a242a37ee2cbd9317b0401d08cf59e29-8.png)
Recommandations associées :
Un exemple de la façon d'implémenter une application SPA monopage dans Vue
Geste HTML5 d'une seule page commutation d'écran coulissant
À propos de Vue Exemple d'analyse de la façon dont js exploite plusieurs zones de routage sur une seule page
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