位置: 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)

  • 微单和单反的区别(微单和单反的区别)(微单和单反的区别那个照相质量高)

    微单和单反的区别(微单和单反的区别)(微单和单反的区别那个照相质量高)

  • 如何开通商户收款码(如何开通商户收款码功能)

    如何开通商户收款码(如何开通商户收款码功能)

  • 电脑安全模式怎么进(电脑安全模式怎么恢复出厂设置)

    电脑安全模式怎么进(电脑安全模式怎么恢复出厂设置)

  • 超过5分钟的视频怎么在微信上发(超过5分钟的视频怎么发到朋友圈)

    超过5分钟的视频怎么在微信上发(超过5分钟的视频怎么发到朋友圈)

  • 微信号登不上怎么把钱取出来(微信号登不上怎么解除实名认证)

    微信号登不上怎么把钱取出来(微信号登不上怎么解除实名认证)

  • 小米12系统什么时候发布(小米12.0.22系统怎么样)

    小米12系统什么时候发布(小米12.0.22系统怎么样)

  • 华为权益查询在哪(华为权益查询在哪里查)

    华为权益查询在哪(华为权益查询在哪里查)

  • 显卡刷bios有什么用(显卡刷bios对显卡影响)

    显卡刷bios有什么用(显卡刷bios对显卡影响)

  • nova7是双卡双待吗(nova7是双卡双待手机吗)

    nova7是双卡双待吗(nova7是双卡双待手机吗)

  • dbms包括的主要程序有哪些(dbms的主要作用)

    dbms包括的主要程序有哪些(dbms的主要作用)

  • 小米6可以用24w充电吗(小米6可以用67w快充?)

    小米6可以用24w充电吗(小米6可以用67w快充?)

  • 荣耀7x是双卡双待吗(荣耀7x双卡双待怎么用)

    荣耀7x是双卡双待吗(荣耀7x双卡双待怎么用)

  • oppo带nfc功能的手机(oppo带nfc功能的5g手机有哪些)

    oppo带nfc功能的手机(oppo带nfc功能的5g手机有哪些)

  • 苹果11可以双卡吗(苹果11可以双卡双微信吗)

    苹果11可以双卡吗(苹果11可以双卡双微信吗)

  • airpods第一次要充多久(airpods第一次需要充电吗)

    airpods第一次要充多久(airpods第一次需要充电吗)

  • 苹果手机迅雷下载的视频在哪里找(苹果手机迅雷下载)

    苹果手机迅雷下载的视频在哪里找(苹果手机迅雷下载)

  • 爱奇艺怎么取消绑定的卡(爱奇艺怎么取消其他人登录)

    爱奇艺怎么取消绑定的卡(爱奇艺怎么取消其他人登录)

  • 华为nova5i支持超级快充吗(华为nova5支持90帧吗)

    华为nova5i支持超级快充吗(华为nova5支持90帧吗)

  • 华为蓝牙耳机声音小怎么办(华为蓝牙耳机声音开满都很小)

    华为蓝牙耳机声音小怎么办(华为蓝牙耳机声音开满都很小)

  • xr怎么设置双卡双待(xr这么双卡双待)

    xr怎么设置双卡双待(xr这么双卡双待)

  • 微信被拉黑申请加好友(微信被拉黑申请好友会是什么样子)

    微信被拉黑申请加好友(微信被拉黑申请好友会是什么样子)

  • uniapp项目中引入vant-Weapp(局部全局都有 史上最详细的方法)(uniapp引入bootstrap)

    uniapp项目中引入vant-Weapp(局部全局都有 史上最详细的方法)(uniapp引入bootstrap)

  • 幼儿园经营支出指什么
  • 文化事业建设费怎么申报
  • 保险费计入什么会计科目需要发票吗
  • 工程项目罚款收入账务处理
  • 开票名称开错了
  • 怎么快速金蝶数据入库
  • 长期借款借方登记归还的本金和利息
  • 银行每年存款任务
  • 物流公司一般纳税人怎么报税
  • 负利润需要交所得税吗
  • 初级会计职称考试时间
  • 主营业务成本没有结转怎么办
  • 初级备考心得总结
  • 购买固定资产货款未付
  • 工商注册需要提供什么
  • 产业政策鼓励类
  • 小型微利企业预缴
  • 餐饮充值赠送
  • 业务招待费是什么科目
  • macos12支持设备
  • 租赁合同维修义务谁承担
  • 基本户是否可以冻结
  • 如何阻止win10升级到win11
  • 机械设备购置的程序是什么
  • 苹果电脑连接打印机打印不出来
  • php发送电子邮件
  • 商贸企业税收优惠政策
  • 本月收到的发票可以下月勾选抵扣吗
  • jetcar.exe - jetcar是什么进程 有什么作用
  • 温尼伯湖成因
  • 职工医保报销会扣医保卡的钱吗
  • nodejs解压
  • 哪种审计证据更可靠
  • 递延收益与递延所得税资产的区别
  • 注册资本认缴可以增加吗
  • yolo v5详解
  • 安卓京东抢购
  • vue全家桶教程
  • 交易性金融资产属于什么科目
  • 赠送的物品有价值吗
  • html常用标签有哪些
  • 农民专业合作组织
  • 开会旅游的费用怎么算
  • 税务机关代开的增值税专用发票不含税销售额是什么意思
  • 摊位出租税率
  • 公司转让注册海外公司
  • 织梦如何使用
  • macos装mysql
  • 税务安全证书应用客户端不成功是什么意思
  • sql存储过程使用
  • 保险公司委托代征是什么意思
  • 增值是什么意思解释
  • 其他应收款账务核销后放在哪个科目里
  • 营改增企业可以转小规模吗
  • 折旧后的剩余价值叫什么
  • 外贸公司是不是什么都做的?
  • 进口产品没有发票怎么入账
  • 公允价值变动损益和投资收益区别
  • 补缴以前年度企业所得税以及滞纳金
  • 增值税负数发票怎么做账
  • 事业单位职工福利费
  • 什么是盈余公积和资本公积的区别
  • Win10预览版更新弹窗如何关闭
  • mac系统怎么清理Adobe残留
  • putty ssh tunnel
  • linux常用命令详解
  • 剑指offter
  • jquery each return
  • unity ctrl
  • unity游戏开发软件
  • 响应鼠标变换表怎么用
  • 友盟模块
  • 用javascript
  • 如何查询税务情况
  • 宁夏电子税务局登录入口
  • 国家财政税务局
  • 查博士报告怎么查真假
  • 火药概念股有哪些
  • 青岛新农合咨询电话
  • 纳税申报2020年2月
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设