vue3使用element ui

774人浏览 / 0人评论 / 添加收藏

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
 

全部评论