美文网首页
zh-zdmin-vue3 添加UI组件(Element Plu

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

作者: 张中华 | 来源:发表于2022-02-05 20:53 被阅读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

    相关文章

      网友评论

          本文标题:zh-zdmin-vue3 添加UI组件(Element Plu

          本文链接:https://www.haomeiwen.com/subject/nalykrtx.html