vue3+element-plus的使用

vue3不支持elementUI，要使用新的插件element-plus

安装

`npm install element-plus --save`

使用

- 全部引用

import { createApp } from 'vue'
import App from './App.vue'

// 引入elementui
import ElementPlus from 'element-plus'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app');

如果报错：[vite] Internal server error: No known conditions for "./lib/theme-cndex.css" specifier in "element-plus" package

在main.js文件添加一行

import 'element-plus/theme-chalk/index.css

- 按需引用

import App from './App.vue'
import ElementPlus from 'element-plus'
// 使用date-picker的时候转英文为中文的工具
import locale from 'element-plus/es/locale/lang/zh-cn'

// 引入elementui
import { ElDatePicker } from 'element-plus'

const app = createApp(App);

// 全局使用button组件
app.use(ElementPlus, { locale });
// 使用date-picker组件
app.component(ElDatePicker);

app.mount('#app');

在vue文件中使用el-loading

  import { api_request } from '../../service/api'
  import { ElLoading } from 'element-plus';
  function handleSearch() {
   // 创建loading实例，并设置配置项
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(0, 0, 0, 0.3)',
      fullscreen: true
    });
    // 发送请求
    api_request.then(() => {
       // 请求成功后关闭loading
      loading.close()
    }).catch(() => {
      // 失败也要关闭
      loading.close()
    })
  }
</script>