github代码地址:https://github.com/956159241/zh-admin/tree/0.0.1
gitee代码地址:https://gitee.com/huafei_1_0/zh-admin/tree/0.0.1/
线上demo地址:http://zhadminvue.iotzzh.com/
第一步:添加Element Plus
yarn add element-plus
第二步: 修改main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
let app = createApp(App);
app.use(router).use(ElementPlus).mount('#app');
第三步:测试
<template>
<div class="body">
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
<el-button>中文</el-button>
</el-row>
<span style="margin: 10px;" @click="goto(true)">登录页</span>
<span @click="goto(false)">首页</span>
<router-view></router-view>
</div>
</template>
参考网址:
https://element-plus.org/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8
https://element-plus.org/zh-CN/guide/quickstart.html#%E5%AE%8C%E6%95%B4%E5%BC%95%E5%85%A5
网友评论