首页 > 其他分享 >Vue.js框架:vue3版本引入使用element-ui

Vue.js框架:vue3版本引入使用element-ui

时间:2023-10-22 09:44:44浏览次数:39  
标签:Vue import value element plus vue3 引入 ui js

一、引入element-plus

  element-ui只支持vue2,vue3需要引入element-plus进行使用,两个分别对应vue2和3两个版本,各自独立,无法跨级兼容。

  地址:https://element-plus.gitee.io/

  在vue3项目终端里使用以下命令引入该依赖:

    npm install element-plus --save

  

二、修改main.ts配置

  import引入以下内容:

    // 引入element-plus依赖
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'

  对组件进行全局注册

// 引入element-plus依赖
  app.use(ElementPlus)

三、使用测试

  创建一个简单的el-table表格:

    <script setup lang="ts">
    import { reactive } from 'vue';

    let testTable = reactive([
      {
        name: "测试数据列1",
        value: "200",
        remark: "备注1",
      },
      {
        name: "测试数据列2",
        value: "250",
        remark: "备注2",
      },
      {
        name: "测试数据列3",
        value: "100",
        remark: "备注3",
      }
    ]);
    </script>

    <template>
      <el-table :data="testTable" max-height="200px">
        <el-table-column prop="name" label="名称" width="150"></el-table-column>
        <el-table-column prop="value" label="数值" width="150"></el-table-column>
        <el-table-column prop="remark" label="备注" width="150"></el-table-column>
      </el-table>
    </template>

  运行结果如下:

  

  正常显示无报错,说明element-plus引入成功。

 

标签:Vue,import,value,element,plus,vue3,引入,ui,js
From: https://www.cnblogs.com/guobin-/p/17779933.html

相关文章

  • nodejs 安装升级解决导入es6语法兼容性问题??=
    nodejs无法识别??==的问题是因为nodejs的版本太老,而引入的模块中包含了新的语法,例如空值运算符??=。这样nodejs就会报错。解决方法大概有三个1,找到对应老版本的模块使用。2,修改模块中不兼容的语法。3,更新nodejs。三个方法中前两个显然会面临大量工作。作为懒人的我,选择了方......
  • 基于SpringBoot与Vue技术的高校毕设管理平台-计算机毕业设计源码+LW文档
    开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9浏览器:谷歌浏览器数据库部分表:DROPTABLEIFEXISTSbisheketi;/*!40101SET@saved_cs_client=@@characte......
  • Python-Json异常:Object of type Decimal is not JSON serializable
    源起:使用python分离出一串文本,因为是看起来像整数,结果json转换时发生异常:TypeError:ObjectoftypeDecimalisnotJSONserializablemsgInfo={"uid":3232324232}json.dumps(msgInfo,ensure_ascii=False)原因:decimal格式不能被json.dumps正确处理。json.dumps函数发现字......
  • Codeforces Round 857 (Div. 2) B. Settlement of Guinea Pigs
    你非常喜欢豚鼠。每个笼子可以住两只豚鼠,且你不想把每个笼子放入不同性别的豚鼠。豚鼠只有两种性别。假设你买到豚鼠时并不知道性别,只有医生能够分辨。接下来的\(n\)天方案中,若第\(i\)天为\(1\),你买入一只豚鼠;若为\(2\),你请医生分辨你的豚鼠性别。给出方案,你最少需要准......
  • 微软的MSBuild
    微软的MSBuild,是和NAnt一样编译项目的工具。也是在NAnt发展起来的时候微软才推出的工具。但微软的MSBuild却比NAnt复杂许多,如果我们想自己去学习MSbuild,特别是VisualStudio工具自动生成的项目文件内容你根本看不明白了。我这两天想通过编辑项目属性达到我的目标,即在生成前事件中加......
  • 呜呜呜我要拿Go赢他~ Go language MacOs build development environment Hello! Go !
    前言Go编程语言是一个开源项目,旨在提高程序员的工作效率。Go富有表现力、简洁、干净且高效。它的并发机制使编写能够充分利用多核和联网机器的程序变得容易,而其新颖的类型系统可以实现灵活和模块化的程序构建。Go可以快速编译为机器代码,同时还具有垃圾收集的便利性和运行时反射......
  • js逆向·找到登录时目标网站的加密算法的几种方式
    js逆向·找到登录时目标网站的加密算法的几种方式为什么要去找到目标网站的加密密码方法:为了要把我们的payload正确的带入目标网站的服务器进行逻辑验证,那么就需要知道对方使用的什么加密或者编码规则来处理数据的,比如说我们输入的密码被base64编码了,然后发送给后端,后端会进行解......
  • BurpSuite Extensions
    BurpSuite是一款功能强大的Web应用程序安全测试工具,除了本身自带的强大功能模块之外,可支持自定义拓展的插件可以帮助一众安全人员更好地识别、发现潜在的风险项目,而插件本身的定制扩展了BurpSuite的功能,使得工具的可扩展性变得强大无比的同时,让很多重复性很高、自动化需求很强烈......
  • vue 动态的class
    1.对象语法:适合较多的class名或动态的class:class="{'test-class':test}"//当test为true时,有test-class值2.数组语法:适合较少的class名:class="[a1,a2]"//表示有两个类名:a1、a2......
  • php js + laravel + mysql开发的手术麻醉临床信息系统源码
    手术麻醉临床信息系统有着完善的临床业务功能,能够涵盖整个围术期的工作,能够采集、汇总、存储、处理、展现所有的临床诊疗资料。通过该系统的实施,能够规范麻醉科的工作流程,实现麻醉手术过程的信息数字化,自动生成麻醉的各种医疗文书,完成共享HIS、LIS、PACS和EMR等手术患者信息,从而提......