Maison  >  Article  >  interface Web  >  Webpack, vue, node réalisent le partage de code sur une seule page

Webpack, vue, node réalisent le partage de code sur une seule page

小云云
小云云original
2018-02-03 11:20:001717parcourir

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

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 --save

Par exemple, si vous devez installer le module de routage vue-router, utilisez simplement le cnpm d'échafaudage install vue-router --save

4. Construisez l'application vue de webpack : vue init webpack

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'erreurs

Indiquez la vue-cli. modèle. Le modèle vue-cli est divisé en modèle officiel, modèle personnalisé et modèle local

Les 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

6. Exécutez-le directement pour voir l'effet.

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

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