Maison > interface Web > Voir.js > Pourquoi vue.js doit être mis en miroir

Pourquoi vue.js doit être mis en miroir

藏色散人
Libérer: 2023-01-13 00:45:13
original
2473 Les gens l'ont consulté

vue.js doit être mis en miroir car la méthode d'installation de NPM sera plus lente lors de la création d'applications à grande échelle avec Vue.js, vous pouvez donc utiliser le miroir cnpm de Taobao pour installer vue.

Pourquoi vue.js doit être mis en miroir

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.0, ordinateur DELL G3.

Pourquoi vue.js est-il installé à l'aide du miroir cnpm ?

Lors de la création d'applications à grande échelle avec Vue.js, il est recommandé d'utiliser la méthode d'installation NPM. NPM peut être bien utilisé avec les packagers de modules tels que Webpack ou Browserify. Mais comme npm est étranger, il est relativement lent à utiliser ; vous pouvez utiliser l'image cnpm de Taobao pour installer vue.

Nous devons d’abord télécharger npm, installer node.js, puis installer npm. Ensuite, utilisez npm pour installer le cnpm de l'image Taobao.

1. Ouvrez cmd et entrez la commande

npm install -g cnpm —registry=https://registry.npm.taobao.org
Copier après la connexion

L'installation de Vue nécessite une version de npm supérieure à 3, alors mettons à niveau npm d'abord, entrez la commande

cnpm install cnpm -g
Copier après la connexion

pour installer vue et entrez la commande

cnpm install vue
Copier après la connexion

Installez vue-cli et entrez la commande

cnpm install —global vue-cli
Copier après la connexion

Pourquoi vue.js doit être mis en miroir

A ce moment, l'environnement a été configuré.

Recommandé : "tutoriel vue"

2. Spécifiez le chemin pour stocker le projet et exécutez la commande

vue init webpack "nom du projet"

Après succès, entrez dans le répertoire où se trouve le projet, exécutez la commande

cd "le dossier où se trouve le projet"

puis exécutez les commandes suivantes dans séquence

cnpm install
Copier après la connexion

Pourquoi vue.js doit être mis en miroir

cnpm run dev
Copier après la connexion

Pourquoi vue.js doit être mis en miroir

En omettant quelques captures d'écran au milieu. . . .

Pourquoi vue.js doit être mis en miroir

Après succès, nous entrons dans le navigateur et saisissons localhost:8080 pour afficher la page suivante.

Pourquoi vue.js doit être mis en miroir

Répertoire du projet :

Jetons ensuite un coup d'œil au projet créé avec succès ci-dessus et entrons dans le répertoire du projet

Pourquoi vue.js doit être mis en miroir

Le répertoire que nous développons est dans src, src contient le répertoire suivant

Pourquoi vue.js doit être mis en miroir

assets : stocke les mutations

components : stocke un fichier de composant

App.vue : fichier d'entrée du projet, nous pouvons également écrire les composants directement ici au lieu d'utiliser le répertoire des composants

main.js : fichier principal du projet

Jetons un coup d'oeil sur App. Le contenu de vue

<template>
  <div id=”app”>
    <img  src=”./assets/logo.png” alt="Pourquoi vue.js doit être mis en miroir" >
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: ‘app’
}
</script>
<style>
app {
  font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Hello.vue
<template>
  <div class=”hello”>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href=”https://vuejs.org“ target=”_blank”>Core Docs</a></li>
      <li><a href=”https://forum.vuejs.org“ target=”_blank”>Forum</a></li>
      <li><a href=”https://gitter.im/vuejs/vue“ target=”_blank”>Gitter Chat</a></li>
      <li><a href=”https://twitter.com/vuejs“ target=”_blank”>Twitter</a></li>
      <br>
      <li>
      <a href=”http://vuejs-templates.github.io/webpack/“ target=”_blank”>
      Docs for This Template
      </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href=”http://router.vuejs.org/“ target=”_blank”>vue-router</a></li>
      <li><a href=”http://vuex.vuejs.org/“ target=”_blank”>vuex</a></li>
      <li><a href=”http://vue-loader.vuejs.org/“ target=”_blank”>vue-loader</a></li>
      <li><a href=”https://github.com/vuejs/awesome-vue“ target=”_blank”>awesome-vue</a></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: ‘hello’,
  data () {
    return {
      msg: ‘Welcome to 菜鸟教程’
    }
  }
}
</script>
<!— Add “scoped” attribute to limit CSS to this component only —>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
Copier après la connexion

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