Vue3.0+Vite2.0项目框架搭建（三）- 引入Element3

安装Element3依赖

yarn add element3

引用Element3

main.js

import { createApp } from 'vue'
import App from '@/App.vue'
import router from "@/router"
import request from '@/common/request'


// global import
//import 'element3/lib/theme-chalk/index.css'
//import Element3 from 'element3'
//createApp(App).use(router).use(request).use(Element3).mount('#app')

// or according to the need to import
import 'element3/lib/theme-chalk/index.css'
// import 'element3/lib/theme-chalk/button.css'
// import 'element3/lib/theme-chalk/input.css'
// import 'element3/lib/theme-chalk/form.css'
// import 'element3/lib/theme-chalk/form-item.css'
// import 'element3/lib/theme-chalk/message.css'
// import 'element3/lib/theme-chalk/icon.css'
import {
    ElButton,
    ElInput,
    ElForm,
    ElFormItem,
    ElIcon   
} from 'element3'

createApp(App).use(router).use(request).use(ElButton).use(ElInput).use(ElForm).use(ElFormItem).use(ElIcon).mount('#app');

文档地址

https://element3-ui.com

使用测试

<template>
  {{ msg }}
  <el-button @click="$router.push({ name: 'InfoMy' })">显示小圆球</el-button>

  <br /><br /><br />
  <el-form :model="user" label-width="120px" style="width:30%;">
    <el-form-item prop="u_id" label="UserID">
      <el-input v-model="user.u_id" />
    </el-form-item>
    <el-form-item prop="u_pwd" label="Password">
      <el-input show-password v-model="user.u_pwd" />
    </el-form-item>
    <el-form-item style="text-align:left;">
      <el-button @click="login">测试axios-登录</el-button>
      <el-button v-if="token" @click="getClassList">获取班级列表</el-button>
    </el-form-item>

  </el-form>

  <transition name="el-fade-in">
    <div v-show="classList.length && token">      
      <div v-for="cls in classList" :key="cls.c_id">
        {{ cls.c_id }}|{{ cls.c_name }}
      </div>
    </div>
    </transition>

  <router-view />
</template>
<script setup>
import { ref } from "vue";
import request from "@/common/request";
import { Message } from 'element3'

const msg = ref("这是主页面");

//登录用户
const user = {
  u_id: "",
  u_pwd: "",
};

//登录令牌
const token = ref("");

//班级列表
const classList = ref([]);

//登录方法
const login = () => {
  request.http.post("/security/tealogin/tlogin", user).then(({ data }) => {
    if (data.success) {
      token.value = data.result; //存储token

      Message.success('登录成功！');
    } else {
      token.value = "";
       Message.error(JSON.stringify(data));
    }
  });
};

//获取班级列表
const getClassList = () => {
  request.http
    .get("/common/classList", { headers: { Token: token.value } })
    .then(({ data: { result } }) => {
      classList.value = result;
    });
};
</script>
<style scoped>
</style>

界面显示正常，引入成功。