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

  • 简单小故事,蕴含大道理(故事简短小故事)

    简单小故事,蕴含大道理(故事简短小故事)

  • 荣耀平板v7pro电池容量是多少(荣耀平板v7pro电池续航)

    荣耀平板v7pro电池容量是多少(荣耀平板v7pro电池续航)

  • vivox70pro+怎么打开nfc(vivox70pro怎么打开开发者选项)

    vivox70pro+怎么打开nfc(vivox70pro怎么打开开发者选项)

  • 苹果商店怎么退款(苹果商店怎么退钱教程)

    苹果商店怎么退款(苹果商店怎么退钱教程)

  • 美团月付是什么意思 怎么关闭(美团月付是什么意思 怎么还)

    美团月付是什么意思 怎么关闭(美团月付是什么意思 怎么还)

  • qq火花怎么隐藏和显示(qq怎么把火花隐藏)

    qq火花怎么隐藏和显示(qq怎么把火花隐藏)

  • 火绒如何拦截电脑弹窗广告(火绒拦截电脑弹窗广告为什么还有)

    火绒如何拦截电脑弹窗广告(火绒拦截电脑弹窗广告为什么还有)

  • 苹果xs被摔会影响内部么(iphonex被摔了)

    苹果xs被摔会影响内部么(iphonex被摔了)

  • 荣耀20pro能插耳机吗(荣耀20pro如何插耳机)

    荣耀20pro能插耳机吗(荣耀20pro如何插耳机)

  • 多闪影集自动上传吗(多闪影集怎么上传照片)

    多闪影集自动上传吗(多闪影集怎么上传照片)

  • 微信电子发票找不到了(怎么在微信找电子发票)

    微信电子发票找不到了(怎么在微信找电子发票)

  • 微信红包怎么默认零钱通支付(微信红包怎么默认零钱支付,不用卡)

    微信红包怎么默认零钱通支付(微信红包怎么默认零钱支付,不用卡)

  • 上两根内存条显示器就不亮了(两根内存条显示内存8G)

    上两根内存条显示器就不亮了(两根内存条显示内存8G)

  • qq显示timi中是什么意思

    qq显示timi中是什么意思

  • tmp可以删吗(windows tmp可以删除吗)

    tmp可以删吗(windows tmp可以删除吗)

  • 手机智能侧边栏不显示怎么办(手机智能侧边栏找不见)

    手机智能侧边栏不显示怎么办(手机智能侧边栏找不见)

  • 电脑的残值率一般为多少(电脑的固定资产残值率)

    电脑的残值率一般为多少(电脑的固定资产残值率)

  • qq注销要多久才能通过(qq注销要多久才消失)

    qq注销要多久才能通过(qq注销要多久才消失)

  • 苹果手机怎么设置悬浮窗口(苹果手机怎么设置壁纸)

    苹果手机怎么设置悬浮窗口(苹果手机怎么设置壁纸)

  • qq会员铭牌怎么更换(qq会员铭牌怎么隐藏)

    qq会员铭牌怎么更换(qq会员铭牌怎么隐藏)

  • 抖音怎么添加拼多多链接(抖音怎么添加拼团链接)

    抖音怎么添加拼多多链接(抖音怎么添加拼团链接)

  • 抖音为什么能超过15秒(抖音为什么能超过抖音)

    抖音为什么能超过15秒(抖音为什么能超过抖音)

  • 安卓照片怎么迁移苹果(安卓照片怎么迁移到苹果手机 知乎)

    安卓照片怎么迁移苹果(安卓照片怎么迁移到苹果手机 知乎)

  • 红米手机强制恢复出厂(红米手机强制恢复关机)

    红米手机强制恢复出厂(红米手机强制恢复关机)

  • imovie如何解除drm保护(imovie怎么撤销)

    imovie如何解除drm保护(imovie怎么撤销)

  • 小米手环4怎么设置门禁卡(小米手环4怎么调时间)

    小米手环4怎么设置门禁卡(小米手环4怎么调时间)

  • 视频会议系统的主要功能

    视频会议系统的主要功能

  • oppo15x颜色有几种(oppor15有什么颜色手机)

    oppo15x颜色有几种(oppor15有什么颜色手机)

  • 旅游APP开发方案怎么做(做旅游app开发流程)

    旅游APP开发方案怎么做(做旅游app开发流程)

  • 发票没有纳税人识别号能开吗
  • 一般纳税人厂房出租怎么开票
  • 手撕发票怎么领取需要什么证件
  • 生产成本存货会计分录
  • 公允价值变动损益借贷方向
  • 营利性养老机构需要缴纳哪些税
  • 一次性收全年服务费怎么入账
  • 工厂临时住宿
  • 研发设备一次性扣除账务处理
  • 建筑企业升资质主管单位
  • 为什么有的单位没有住房公积金
  • 公司在走注销流程被起诉了怎么办
  • 体检合同属于什么合同
  • 滴滴出行客运服务费 事业单位 报销
  • 企业所得税季度预缴纳税申报表
  • 入职不满一年有年假吗
  • 账务不符怎么写
  • 上月计提的工资,下月做调整
  • 财务费用中的利息收入指什么
  • win10消费者版本和商业版本有什么区别
  • 企业注销时往来账目挂账怎么处理
  • 现金日记账的收为什么不根据银行和现金相互划转
  • 怎么把浏览器屏幕缩小
  • ph是什么文件
  • 收益性支出的项目有哪些
  • 财务费用属于期间汇转账户吗
  • 金融债券利息收入免税吗
  • 进程mmc.exe
  • 月入2万的10个小生意低成本
  • 寿命最短的苹果手机
  • php的session
  • 自产产品管理部门领用
  • 跆拳道馆怎么盈利
  • 上月未开发票的销项税,已经申报缴税,在本月开了票,应该如何填报?
  • 固定资产闲置能报废吗
  • 治疗孩子咳嗽小秘方,超实用
  • 向梵高致敬油画
  • 增值税专用发票丢了怎么补救
  • commonjs的特点
  • php识别验证码的库高级
  • 转正差额怎么算
  • python中写函数
  • wordpress jquery
  • 财政拨款结转累计结转为负
  • 公司购买的商品房怎么入账
  • 公司抵押贷款的钱,可以转到私人账号
  • 原材料卖出去会计分录
  • 交易性金融资产的账务处理
  • db2自增函数
  • 契税并入土地价值吗
  • 以前年度损益调整结转到本年利润吗
  • 计提折旧的固定资产平均总值怎么算
  • 应付国库集中支付结余核算
  • 我国流转税税制结构的现状及改进意见
  • 已付款未收到货怎么办
  • 开发成本存货怎么算
  • 业务招待费的扣除标准60%什么意思
  • 赠送产品会计分录怎么写
  • 投资主体将其拥有的货币或产业资本
  • 贷款利息支出属于财务费用吗
  • 12月计提的工资没有发完怎么做账
  • 发生的费用
  • 小规模纳税人中标一般计税
  • 将windows的文件上传到ubuntu
  • aow exe是什么
  • u盘运行win10系统
  • 延长药品使用时间的方法
  • win8系统如何恢复出厂设置
  • unity shader lerp
  • linux执行sh文件报错找不到
  • 如何使用蓝牙耳机
  • 深入理解python异步编程
  • angular子组件调用父组件的方法
  • angularjs1.5
  • unity获取当前位置
  • js 修改 css
  • python类属性和类方法
  • 上海国家税务局官网发票查验平台
  • 黄金手镯可以卖出去吗
  • 美国网购消费者个人信息保护法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设