快捷導(dǎo)航

vue3使用element?ui的方法實(shí)例

更新時(shí)間：2022年10月27日 11:19:11 作者：一個(gè)小點(diǎn)點(diǎn).

vue3出來(lái)好一段時(shí)間了,一直想著用一下,下面這篇文章主要給大家介紹了關(guān)于vue3使用element?ui的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

element-ui支持vue2版本，當(dāng)用vue3安裝element-ui的時(shí)候會(huì)報(bào)錯(cuò)，這就需要安裝element-plus版本來(lái)用到vue3項(xiàng)目中。

element-ui網(wǎng)址：https://element.eleme.cn/#/zh-CN/

element-plus網(wǎng)址：https://element-plus.gitee.io/zh-CN/

1、首先安裝element-plus

npm install element-plus --save

可以在package.json中檢查是否安裝成功

出現(xiàn)這一行就證明安裝成功了...

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="請(qǐng)選擇">
      <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>

然后應(yīng)該就可以了...

4、有的會(huì)出現(xiàn)報(bào)錯(cuò)，那就再安裝一下element ui

npm install element-ui -S

補(bǔ)充：新引入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')

啟動(dòng)后，項(xiàng)目能正常顯示。