Comment installer les composants vue et element

Cette fois, je vais vous présenter la méthode d'installation des composants vue et element. Quelles sont les précautions pour l'installation des composants vue et element. Ce qui suit est un cas pratique, prenons un. regarder.

1. Créer un nouveau projet vue

1. Tout d'abord, vous devez télécharger nodejs. Après l'installation, ouvrez la fenêtre de commande et utilisez l'outil de gestion de packages npm

. npm est intégré au nœud, entrez donc directement npm-v pour afficher les informations sur la version de npm

2. Certaines ressources npm sont bloquées ou sont des ressources étrangères, ce qui entraîne souvent un échec lors de l'utilisation de npm pour installer des packages dépendants. Par conséquent, j'ai également besoin du miroir national de npm --- cnpm.

3. Entrez npm install -g dans la ligne de commande cnpm--registry=http://registry.npm.taobao.org puis attendez la fin de l'installation, vous pouvez utiliser cnpm pour installer les packages dépendants. Ici, je dirai qu'il est préférable d'utiliser npm pour installer parfois. cnpm ne télécharge pas toutes les dépendances. Si npm se télécharge lentement, vous pouvez essayer cnpm pour installer les packages dépendants.

4. Installez l'outil de création d'échafaudages vue-cli. Exécutez la commande npm install -g vue-cli à partir de la ligne de commande et attendez la fin de l'installation.

5. Construisez le projet avec vue-cli. Sélectionnez le répertoire pour stocker le nouveau projet

6. Dans le répertoire du bureau, exécutez la commande vue init webpack firstVue dans la ligne de commande. Expliquez cette commande. Cette commande signifie initialiser un projet, où webpack est l'outil de construction, c'est-à-dire que l'ensemble du projet est basé sur webpack. où firstVue est le nom de l'intégralité du dossier du projet.

7. Lors de l'exécution de la commande d'initialisation, il sera demandé à l'utilisateur de saisir plusieurs options de base, telles que le nom du projet, la description, l'auteur et d'autres informations. Si vous ne souhaitez pas remplir les champs, appuyez simplement sur Entrée et par défaut.

8. Ouvrez le dossier firstVue. Le fichier de projet est le suivant.

9. Installez les packages de dépendances (n'oubliez pas d'être dans le dossier du projet nouvellement créé) via la commande npm install

10. Après avoir installé les dépendances, exécutez le projet via npm run dev. Le port par défaut est généralement 8080. Ouvrez le navigateur et entrez localhost:8080

. 11. Si le port 8080 est occupé, vous devez modifier le fichier de configuration config/index.js

2. Présenter l'élément

1. Dans le répertoire actuel, exécutez : npm i element-ui -S

2. Ajoutez le code (rouge) dans src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'	//手动变红
import '../node_modules/element-ui/lib/theme-chalk/index.css'	//手动变红
//具体路径有的不同，vue运行报错请看第五点
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)	//手动变红
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

3. Ensuite, il peut être utilisé directement dans le fichier .vue, par exemple : apporter quelques modifications dans src/components/Hello.vue

<template> 
 <p class="hello"> 
 <h1>{{ msg }}</h1> 
 <h2>Essential Links</h2> 
 <el-button>默认按钮</el-button> 
 <el-button type="primary">主要按钮</el-button> 
 <el-button type="text">文字按钮</el-button> 
 </p> 
</template> 
 
<script> 
export default { 
 name: 'hello', 
 data () { 
 return { 
 msg: 'Welcome to Your Vue.js App' 
 } 
 } 
} 
</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>

Je crois que vous l'avez maîtrisé après. lire le cas dans cet article Pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter la commutation aléatoire des identifiants WeChat avec JS

Les sous-itinéraires du bas la barre de navigation de vue.js ne montre pas comment y faire face

Comment télécharger le fichier de configuration Nginx en sections

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!