zh-zdmin-vue3 添加UI组件(Element Plu

2022-02-05  本文已影响0人  张中华

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

上一篇 下一篇

猜你喜欢

热点阅读