Für Anfänger ist die Installation und Verwendung von Element-UI-Komponenten in einem Vue-Projekt nicht sehr klar. Das Folgende ist eine Zusammenfassung meiner Erfahrungen und Praktiken
Der erste Schritt ist das Öffnen des Terminals
Öffnen Sie die WebStorm-Terminalkonsole Terminalund geben Sie mit dem cdBefehl das von Ihnen erstellte vue-Projekt ein
Der zweite Schritt ist die Installation von Element-UI
Verwenden Sie den folgenden Installationsbefehl, um Element-UI für Ihr vue-Projekt zu installieren:
npm i element-ui -S
Nach Abschluss der Installation wird die folgende Oberfläche mit Informationen zur Installationsversion angezeigt
Der dritte Schritt besteht darin, zu überprüfen, ob die Installation erfolgreich ist
Öffnen Sie die package.jsonDatei unter dem vue-Projekt . Wenn Informationen zur Element-Benutzeroberfläche vorhanden sind, wurde sie erfolgreich installiert
Der vierte Schritt ist das Importieren der Element-Benutzeroberfläche
In main.js vue Projekt importieren import ElementUI from 'element-ui', import 'element-ui/lib/theme-chalk/index.css', Vue.use(ElementUI)weil andere automatisch importiert gut angelegt
注意:出现红色波浪线报错提示：JSHint: 'import' is only available in ES6 (use 'esversion: 6). (W119) 在页面中加入/* jshint esversion：6 */就可以了
Der fünfte Schritt ist die Installation der Testseite
Zu diesem Zeitpunkt ist die Installation von element-ui abgeschlossen, und andere Dateien müssen nicht geändert werden. App.vueSchreiben Sie den Code in die
element-ui-Komponente, der sich auf die offizielle Lerndokumentation bezieht. Hier ist der Fall in der offiziellen Dokumentation:
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
Geben Sie dann den folgenden Befehl in das auszuführende Terminal ein:
npm run dev
Die erfolgreiche Operation sieht wie folgt aus:
Laufergebnis:
Hinweis:
Der Fall auf der offiziellen Website wird nicht angegeben <template></template>, und beim direkten Kopieren und Ausführen tritt der folgende Fehler auf:
1.把内容外加上<template></template>就可以运行了；
2.项目运行请在有网情况下