vue3使用element ui的方法实例

 更新时间:2022年10月27日 11:19:11   作者:一个小点点.  
vue3出来好一段时间了,一直想着用一下,下面这篇文章主要给大家介绍了关于vue3使用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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vite.config.ts如何加载.env环境变量

    vite.config.ts如何加载.env环境变量

    这篇文章主要介绍了vite.config.ts加载.env环境变量方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3父子组件传值 双向绑定及注意问题小结

    vue3父子组件传值 双向绑定及注意问题小结

    这篇文章主要介绍了Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,本文结合示例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程

    基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程

    这篇文章主要给大家介绍了关于如何基于Vue+ELement搭建动态树与数据表格实现分页模糊查询的相关资料,Vue Element UI提供了el-pagination组件来实现表格数据的分页功能,需要的朋友可以参考下
    2023-10-10
  • Vue实例中el和data的两种写法小结

    Vue实例中el和data的两种写法小结

    这篇文章主要介绍了Vue实例中el和data的两种写法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • vue日期选择框之时间范围的使用介绍

    vue日期选择框之时间范围的使用介绍

    这篇文章主要介绍了vue日期选择框之时间范围的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue iview 隐藏Table组件里的某一列操作

    vue iview 隐藏Table组件里的某一列操作

    这篇文章主要介绍了vue iview 隐藏Table组件里的某一列操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 实用的Vue开发技巧

    实用的Vue开发技巧

    这篇文章主要介绍了7个实用的Vue开发技巧文。中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习一下吧
    2019-05-05
  • vue+vant实现商品列表批量倒计时功能

    vue+vant实现商品列表批量倒计时功能

    这篇文章主要介绍了vue+vant实现商品列表批量倒计时功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 详解用vue编写弹出框组件

    详解用vue编写弹出框组件

    本篇文章主要介绍了详解用vue编写弹出框组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue3使用JSX的方法实例(笔记自用)

    Vue3使用JSX的方法实例(笔记自用)

    以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于Vue3使用JSX的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02

最新评论