vue3使用elementui的方法实例

目录

前言1、首先安装element-plus2、修改main.js或main.ts文件3、然后在代码中使用4、有的会出现报错，那就再安装一下element ui总结

前言

element-ui支持vue2版本，当用vue3安装element-ui的时候会报错，这就需要安装element-plus版本来用到vue3项目中。
element-ui网址：https://element.eleme.cn/#/zh-CN/
element-plus网址：https://element-plus.gitee.io/zh-CN/

1、首先安装element-plus

npm install element-plus --save可以在package.json中检查是否安装成功

出现这一行就证明安装成功了...

2、修改main.js或main.ts文件

import { createApp } from "vue";import App from "./App.vue";import router from "./router";import store from "./store";import ElementPlus from 'element-plus';import 'element-plus/theme-chalk/index.css'; import locale from 'element-plus/lib/locale/lang/zh-cn'createApp(App).use(store).use(router).use(scroll).use(ElementPlus, { locale }).mount("#app");
3、然后在代码中使用

<template>
  <div class="Select">
    <el-select v-model="value" filterable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template><script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Select",
  props: {},
  setup() {
    const value = ref("");
    const options = [
      {
        value: "上海市",
        label: "上海市",
      },
      {
        value: "杭州市",
        label: "杭州市",
      },
      {
        value: "北京市",
        label: "北京市",
      },
      {
        value: "天津市",
        label: "天津市",
      },
      {
        value: "重庆市",
        label: "重庆市",
      },
    ];
    return {
      value,
      options,
    };
  },
});
</script>然后应该就可以了...

4、有的会出现报错，那就再安装一下element ui

npm install element-ui -S补充：新引入Element Plus

npm install element-plus --save

main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import '@/assets/scss/reset.scss'

import ElementUI from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(store).use(router).use(ElementUI).mount('#app')启动后，项目能正常显示。

总结

到此这篇关于vue3使用element ui的文章就介绍到这了,更多相关vue3使用element ui内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！