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

  • 苹果12怎么录屏(苹果12怎么录屏有声音)

    苹果12怎么录屏(苹果12怎么录屏有声音)

  • 华为怎么识别图里的文字(华为怎么识别图片植物)

    华为怎么识别图里的文字(华为怎么识别图片植物)

  • e52670v3相当于什么cpu(e52670v2相当于i几)

    e52670v3相当于什么cpu(e52670v2相当于i几)

  • 荣耀20pro支持防水防尘吗(荣耀20pro有没有防抖功能)

    荣耀20pro支持防水防尘吗(荣耀20pro有没有防抖功能)

  • 华硕显卡白灯怎么关闭(华硕显卡白灯怎么bios关闭)

    华硕显卡白灯怎么关闭(华硕显卡白灯怎么bios关闭)

  • 微信朋友圈不发东西是怎么显示(微信朋友圈不发图片只发文字怎么弄)

    微信朋友圈不发东西是怎么显示(微信朋友圈不发图片只发文字怎么弄)

  • 华为nova3屏幕多大尺寸(华为nova3屏幕多大)

    华为nova3屏幕多大尺寸(华为nova3屏幕多大)

  • 华为p40支持北斗导航吗(华为p40支持北斗发信息吗)

    华为p40支持北斗导航吗(华为p40支持北斗发信息吗)

  • 主卡查副卡微信(主卡可以查副卡的微信)

    主卡查副卡微信(主卡可以查副卡的微信)

  • 抖音压缩画质怎么办(抖音压缩画质怎么弄)

    抖音压缩画质怎么办(抖音压缩画质怎么弄)

  • 微信被删除了还能发信息吗(微信被删除了还能看到对方换头像吗)

    微信被删除了还能发信息吗(微信被删除了还能看到对方换头像吗)

  • 安卓手机慢怎么办(安卓手机变慢了怎么办?五招让手机变快方法)

    安卓手机慢怎么办(安卓手机变慢了怎么办?五招让手机变快方法)

  • oppoa11充电多长时间才满 (oppoa11充电速度是多少w)

    oppoa11充电多长时间才满 (oppoa11充电速度是多少w)

  • vivox20何时上市(vivo x20什么时候发布)

    vivox20何时上市(vivo x20什么时候发布)

  • 计算机的主频指的是(计算机的主频指的是_______________ (单选))

    计算机的主频指的是(计算机的主频指的是_______________ (单选))

  • ios12信任设置在哪(苹果12信任app)

    ios12信任设置在哪(苹果12信任app)

  • 三星g9730是什么型号(三星g973n是什么机型)

    三星g9730是什么型号(三星g973n是什么机型)

  • 苹果怎么取消icloud自动续费(苹果怎么取消icloud续费)

    苹果怎么取消icloud自动续费(苹果怎么取消icloud续费)

  • 网易考拉红卡和黑卡区别(网易考拉海购红卡会员)

    网易考拉红卡和黑卡区别(网易考拉海购红卡会员)

  • 什么软件可以给视频加边框(什么软件可以给视频加字幕)

    什么软件可以给视频加边框(什么软件可以给视频加字幕)

  • 55纳米相变存储芯片(55纳米相变存储芯片相关上市公司)

    55纳米相变存储芯片(55纳米相变存储芯片相关上市公司)

  • 在win7系统中,本地组策略编辑器打不开怎么办?(在windows 7中)

    在win7系统中,本地组策略编辑器打不开怎么办?(在windows 7中)

  • Win10为每个应用窗口设置不同的输入法(windows所有应用)

    Win10为每个应用窗口设置不同的输入法(windows所有应用)

  • 无法连接到你的组织的激活服务器解决方法(无法连接到你的相机,请重启手机)

    无法连接到你的组织的激活服务器解决方法(无法连接到你的相机,请重启手机)

  • 什么是WebRTC?(什么是webrip)

    什么是WebRTC?(什么是webrip)

  • python中Array和DataFrame如何相互转换(python,array)

    python中Array和DataFrame如何相互转换(python,array)

  • 一般纳税人的申报方式
  • 公司申报房产税 土地取得时间怎么写的
  • 税务师考试考几门几年考完
  • 计提工资是包含社保吗
  • 银行汇票可以异地跨行使用吗
  • 研发支出期末余额列报
  • 房地产自有资金投入
  • 损失补偿原则的限制条件有
  • 客户未付关税是否可以申请晚交
  • 多扣了离职人员的钱
  • 跨年暂估收入如何调整
  • 电力工程公司岗位职责
  • 写字楼出租流程
  • 税控技术服务
  • 一般纳税人提供非学历教育可以简易计税吗
  • 关于两套账老板和会计须知的4个点
  • 加计扣除需要注意的几大风险点
  • 住房维修基金使用管理办法
  • 非营利组织免税资格可以免些什么税
  • 发票冲红有时间要求吗
  • 出口退税企业的税负率怎么算?
  • 关于购买专业书籍的请示
  • 公司开13个点增值税交多少钱
  • 财务费用年末有余额吗
  • linux 数字
  • deepin如何
  • 加班费如何做账
  • 总公司欠分公司的借款可以计提坏账
  • 银行收取对公账户服务费有什么用
  • php的mysql_query
  • uniapp自定义组件模式
  • code ide
  • 劳务派遣公司的账务处理
  • 生活常识 小常识
  • linux写c++程序
  • 特斯拉适用于什么车型
  • vue该怎么学
  • 充话费如何开公司发票
  • 公司购买一台电脑低于3000元怎么办
  • 将10万元存款投入企业的会计分录
  • 有什么是即征即退税的
  • 进项税额转出月底需要结转吗
  • 事业单位政府拨款的会计分录
  • 其他债权投资是长期投资吗
  • 联营企业与合营企业纳入合并吗
  • 公司开一般户和基本户开哪个好
  • sqlserver控制台
  • 个人去税务局开劳务发票要交多少税
  • 已认证的红字发票要给购买方吗
  • 资产负债表的资产按流动性大小排列
  • 差旅费抵扣政策内容
  • 会计科目其他应付款代码
  • 企业补提以前年度折旧政策依据怎么写
  • k3凭证模板
  • 材料采购是什么会计要素
  • 挂靠工程项目预交税金的会计分录如何做?
  • 工程未竣工可以出竣工报告吗
  • redhat6.5安装图形界面
  • 在window7
  • windows server 2008 r2最大支持内存
  • win10网络身份验证失败
  • hotkey在哪
  • win7桌面右键菜单多余选项删除
  • unix2dos命令
  • Android游戏开发入门
  • 电脑安装node
  • node和javascript
  • js窗口关闭触发事件
  • [推荐]抖音上那些好看的视频和有才的帐号
  • 基于javascript创建导航页面
  • python仿站软件官网
  • 河北发票查询真伪查询
  • 跨区域提供建筑安装服务
  • 个人所得税代扣代缴手续费返还政策
  • 北京地税电子税票怎么开
  • 手机陌陌卸载还有记录吗
  • 南昌 税务局
  • 中华人民共和国刑法
  • 提高税务管理水平,降低税务风险
  • 税务内控机制建设
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设