So installieren Sie Vue- und Element-Komponenten

Dieses Mal werde ich Ihnen die Installationsmethode von Vue- und Elementkomponenten vorstellen. Was sind die Vorsichtsmaßnahmen für die Installation von Vue- und Elementkomponenten? sehen.

1. Erstellen Sie ein neues Vue-Projekt

1. Zuerst müssen Sie nodejs herunterladen. Öffnen Sie nach der Installation das Befehlsfenster und verwenden Sie das npm-Paketverwaltungstool

npm ist in den Knoten integriert. Geben Sie also direkt npm-v ein, um Informationen zur npm-Version anzuzeigen

2. Einige npm-Ressourcen sind blockiert oder Fremdressourcen, was bei der Verwendung von npm zum Installieren abhängiger Pakete häufig zu Fehlern führt. Daher benötige ich auch den inländischen Spiegel von npm – cnpm.

3. Geben Sie npm install -g in die Befehlszeile ein cnpm--registry=http://registry.npm.taobao.org Warten Sie dann, bis die Installation abgeschlossen ist, und verwenden Sie dann cnpm, um die abhängigen Pakete zu installieren. Hier möchte ich sagen, dass es am besten ist, npm zum Installieren zu verwenden . Manchmal lädt cnpm nicht alle Abhängigkeiten herunter. Wenn npm langsam herunterlädt, können Sie versuchen, abhängige Pakete zu installieren.

4. Installieren Sie das Gerüstbau-Tool vue-cli. Führen Sie den Befehl npm install -g vue-cli über die Befehlszeile aus und warten Sie, bis die Installation abgeschlossen ist.

5. Erstellen Sie das Projekt mit vue-cli. Wählen Sie das Verzeichnis aus, in dem das neue Projekt gespeichert werden soll

6. Führen Sie im Desktop-Verzeichnis den Befehl vue init webpack firstVue in der Befehlszeile aus. Erklären Sie diesen Befehl. Dieser Befehl bedeutet, ein Projekt zu initialisieren, in dem Webpack das Build-Tool ist, dh das gesamte Projekt basiert auf Webpack. Dabei ist firstVue der Name des gesamten Projektordners.

7. Beim Ausführen des Initialisierungsbefehls wird der Benutzer aufgefordert, mehrere grundlegende Optionen einzugeben, z. B. Projektname, Beschreibung, Autor und andere Informationen. Wenn Sie die Felder nicht ausfüllen möchten, drücken Sie einfach die Eingabetaste, um die Standardeinstellungen zu ändern.

8. Öffnen Sie den Ordner firstVue. Die Projektdatei lautet wie folgt.

9. Installieren Sie Abhängigkeitspakete (denken Sie daran, dass sie sich im neu erstellten Projektordner befinden) über den npm-Installationsbefehl

10. Führen Sie das Projekt nach der Installation der Abhängigkeiten über npm run dev aus. Der Standardport ist im Allgemeinen 8080. Öffnen Sie den Browser und geben Sie localhost:8080

ein 11. Wenn Port 8080 belegt ist, müssen Sie die Konfigurationsdatei config/index.js

ändern 2. Element vorstellen

1. Führen Sie im aktuellen Verzeichnis Folgendes aus: npm i element-ui -S

2. Code (rot) in src/main.js hinzufügen

// 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. Dann kann es direkt in der .vue-Datei verwendet werden, wie zum Beispiel: Nehmen Sie einige Änderungen in src/components/Hello.vue vor

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

Ich glaube, Sie haben es danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie den zufälligen Wechsel von WeChat-IDs mit JS

Die Unterrouten unten Die Navigationsleiste von vue.js wird nicht angezeigt. Anleitung zum Umgang mit

So laden Sie die Nginx-Konfigurationsdatei in Abschnitten herunter

Das obige ist der detaillierte Inhalt vonSo installieren Sie Vue- und Element-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!