位置: IT常识 - 正文

Element UI 及 Element Plus框架

编辑:rootadmin
Element UI 及 Element Plus框架

推荐整理分享Element UI 及 Element Plus框架,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

一,何为Element UI 及 Element Plus?

它们是前端框架。它是包含很多有自己风格的组件库。 Element目前有两个版本:element-ui 及 element-plus两个版本。它将HTML的基础控件进行了封装,用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。Element UI是一款基于Vue2.x 的界面框架;Element Plus是一款基于Vue3.x 的界面框架;

既然基于Vue,所以可以使用打包工具打包,例如 Vite或WePack 

当然Element UI与有React及Angular的版本了。

二、Element UI 与 Element Plus区别?

Element UI框架的升级版(3.x)是Element Plus;Element Plus 目前还处于快速开发迭代中由于 Vue 3 不再支持 IE11,Element Plus 也不再支持 IE 浏览器 Element-Plus 已经把vue的版本锁定了3.x;而Element UI是基于Vue 2.

三、Element UI 与 Element Plus使用

       方式一、直接引用方式,引用其CSS及JS,还有vue.js即可:        

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <div id="app"> <el-button @click="visible = true">Button</el-button> <el-dialog :visible.sync="visible" title="Hello world"> <p>Try Element</p> </el-dialog> </div></body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue@2/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { visible: false } } }) </script></html>

方式二、使用npm加载,以下以Vue3.0为例:

1,创建一个Vue CLI项目:

2,添加element plus引用:        

import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'//import zhCn from 'element-plus/dist/locale/zh-cn.mjs'import en from 'element-plus/dist/locale/en.mjs'import App from './App.vue'const app = createApp(App)//切换控件内部的语言app.use(ElementPlus, { // locale:zhCn, locale:en, })app.mount('#app')Element UI 及 Element Plus框架

3,创建一个控件Helloworld.vue:

<template> <div> <el-calendar v-model="value" /> </div> </template> import { ref } from 'vue' export default { name: 'HelloWorld', data: function() { return { value: ref(new Date()) } }, props: { msg: String }}

4,调用Helloworld.vue:

<template> <HelloWorld msg="Welcome to Your Vue.js App"/> </template><script> import HelloWorld from './components/HelloWorld.vue' export default{ name: 'App', components: { HelloWorld } }</script>

结果:

注意:

1,使用element plus的时候,发现有些组件不能使用。查到问题,发现script加了lang="ts".

<script lang="ts" setup>

这个是说明这个组件是基于typescript的。去掉这个 lang="ts",很多组件还是可以用的。

2,本人也尝试过安装typescript,但发现安装这个以后,语法需要遵循typescript的语法,且会自动将js文件变成.ts文件。不习惯,所以我又卸载了。

3,vue3.x支持使用export或<script stepup>的方式。但有些初始化数据,还是需要使用<script stepup>(不然会报错):

例如:

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="Address" /> </el-table></template> <script setup> const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', } ] </script>

调用:

import {createRouter, createWebHashHistory} from "vue-router";const routes = [ { path: "/", component: () => import("../views/HomePage.vue") }, { path: "/home", component: () => import("../views/HomePage.vue") }, { path: "/vip", component: () => import("../views/VipPage.vue") }, { path: "/404", component: () => import("../views/ErrorPage.vue") }, { path: "/:catchAll(.*)", // 不识别的path自动匹配404 redirect: '/404', },]const router=createRouter({ history: createWebHashHistory(), routes})export default router;

结果:

本文链接地址:https://www.jiuchutong.com/zhishi/278053.html 转载请保留说明!

上一篇:os x yosemite wifi断线怎么办?yosemite wifi掉线解决详细步骤

下一篇:让QuickLook查看文件时可以选择和复制文字的方法(quicklylook)

  • 网上赚钱的10种方法(网上赚钱的10种方式)

    网上赚钱的10种方法(网上赚钱的10种方式)

  • mini5支持一代笔还是二代笔(mini5用一代笔还是二代笔啊)

    mini5支持一代笔还是二代笔(mini5用一代笔还是二代笔啊)

  • switch可以边充电边玩吗(switch可以边充电边玩伤电池吗)

    switch可以边充电边玩吗(switch可以边充电边玩伤电池吗)

  • wps边框线怎么设置(wps边框线怎么设置粗细)

    wps边框线怎么设置(wps边框线怎么设置粗细)

  • 抖音黑名单解除后没有此好友(抖音黑名单解除后怎么找到对方)

    抖音黑名单解除后没有此好友(抖音黑名单解除后怎么找到对方)

  • 声卡没有声音怎么回事(声卡没有声音怎么解决)

    声卡没有声音怎么回事(声卡没有声音怎么解决)

  • 微信视频号如何盈利(微信视频号如何投诉)

    微信视频号如何盈利(微信视频号如何投诉)

  • 淘宝拒绝退款申请怎么要回钱(淘宝拒绝退款申请可以重新申请退款吗)

    淘宝拒绝退款申请怎么要回钱(淘宝拒绝退款申请可以重新申请退款吗)

  • 小米盒子恢复出厂设置后还是卡在开机画面(小米盒子恢复出厂设置后进不了桌面)

    小米盒子恢复出厂设置后还是卡在开机画面(小米盒子恢复出厂设置后进不了桌面)

  • qq群转让群主冷却时间(qq群转让群主之后怎么拿回来)

    qq群转让群主冷却时间(qq群转让群主之后怎么拿回来)

  • 荣耀30散热方式(荣耀30散热方式怎么样)

    荣耀30散热方式(荣耀30散热方式怎么样)

  • 钢化膜为什么会有斜纹(钢化膜为什么会翘边)

    钢化膜为什么会有斜纹(钢化膜为什么会翘边)

  • 华为p20是不是快充(华为p20支持快充电吗)

    华为p20是不是快充(华为p20支持快充电吗)

  • 手机ke是什么意思(手机客是什么意思)

    手机ke是什么意思(手机客是什么意思)

  • wifi万能钥匙有mac版吗(wifi万能钥匙有密码的能连吗)

    wifi万能钥匙有mac版吗(wifi万能钥匙有密码的能连吗)

  • 抖音礼物怎么送涂鸦(抖音礼物怎么送66个)

    抖音礼物怎么送涂鸦(抖音礼物怎么送66个)

  • mate10支持多少瓦快充(mate10支持多少瓦充电)

    mate10支持多少瓦快充(mate10支持多少瓦充电)

  • 电池医生怎么看寿命(电池医生怎么看电池健康)

    电池医生怎么看寿命(电池医生怎么看电池健康)

  • 云手机是什么(沐桦云手机是什么)

    云手机是什么(沐桦云手机是什么)

  • 抽屉模式是什么意思(抽屉模式在哪里打开)

    抽屉模式是什么意思(抽屉模式在哪里打开)

  • 爱奇艺是什么(爱奇艺是什么意思)

    爱奇艺是什么(爱奇艺是什么意思)

  • oppoa77电池容量多大(oppoa7手机电池容量)

    oppoa77电池容量多大(oppoa7手机电池容量)

  • qq怎么和好友产生轮船(qq怎么和好友产生共同群)

    qq怎么和好友产生轮船(qq怎么和好友产生共同群)

  • 怎么重新设置wifi(怎么重新设置wifi路由器密码)

    怎么重新设置wifi(怎么重新设置wifi路由器密码)

  • 西瓜视频如何分享转发(西瓜视频如何分屏观看)

    西瓜视频如何分享转发(西瓜视频如何分屏观看)

  • elbycheck.exe是安全进程吗 有危险吗 elbycheck进程是什么文件(ekb install)

    elbycheck.exe是安全进程吗 有危险吗 elbycheck进程是什么文件(ekb install)

  • 建筑业如何分项目核算
  • 个人所得税的税目分多少种
  • 交易性金融资产公允价值变动计入
  • 运输发票抵扣税怎么算
  • 叉车维修费计什么费用
  • 业务招待费所得税前扣除标准
  • 资产负债表中无形资产是原值还是净值
  • 外聘人员劳务费入什么科目
  • 小规模纳税人改为一般纳税人需要什么材料
  • 一次性加速折旧汇算清缴调增吗
  • 票据占比不得超过各项贷款的
  • 被强制执行的款怎么记账
  • 挂靠工程的所得税账务处理怎么做?
  • 购买电脑的方案
  • 非货币性资产对外投资
  • 农业公司没发票可以入账吗
  • 发票专用章管理办法
  • 计提本月工资记账凭证怎么填
  • 增值税代扣代缴抵扣
  • 固定资产清理汇算清缴如何反应
  • 停工停产费用
  • 注册表修改系统安装日期
  • win11 老机器
  • 个人取得的工资、薪金所得应按次征收个人所得税
  • 收回已核销的坏账并入账是什么意思
  • 礼品应该计入会计分录
  • macbook怎么设置输入法
  • PHP选项代码
  • 企业固定资产计提折旧是以什么为前提
  • 委托加工物资增值税计税依据
  • php中实现文件上传需要用到哪几个函数
  • thinkphp框架的作用
  • 个人独资企业都需要交什么税
  • threejs怎么用
  • 人工智能该如何规划软件工程师岗位
  • php自定义变量的方法是
  • 上月普通发票怎么作废
  • 小规模开劳务费可以开多少
  • python中字典的键有何要求
  • 建筑公司劳务分包开票内容怎么写
  • 现金支票最少多少起提
  • 幼儿园会计做账流程
  • 新成立公司如何报税
  • 土地作为无形资产还是固定资产
  • 一般纳税人劳务税率是多少?
  • 单位结算卡和回单卡
  • 银行对账单和回单有什么区别
  • 小微企业和小规模纳税人的区别
  • sqlserver 类型
  • sqlserver性能优化5种方式
  • win7系统怎样设置
  • win8热点设置
  • 趣谈linux系统
  • linux系统中的文件
  • centos8 php7.4
  • win7旗舰版怎么进入bios
  • 电脑xp系统桌面
  • linux中安装jdk1.8
  • win8开机进入开始界面
  • windowsxp优化教程
  • linux bin和sbin
  • 微软状态
  • rteng7.exe - rteng7是什么进程 有什么用
  • 微软撤回快捷键
  • win10文件资源
  • win7如何设置网络连接路由器
  • linux内存耗尽怎么解决
  • js时间范围
  • jquery 插件写法
  • android自定义属性详解
  • Python+Wordpress制作小说站
  • nodejs数据库数据渲染
  • javascript用处
  • android英语
  • Android SDK Manager无法更新的解决方案
  • 湖北省电子税务局新版登录操作简介
  • 消费税要把增值税算进去吗
  • 记账凭证编制的依据可以用
  • 耕地占用税减免支持项目发展
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设