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

  • 魅族18spro支持无线充电吗(魅族18spro支持无线充?)

    魅族18spro支持无线充电吗(魅族18spro支持无线充?)

  • 应用隐身在哪里设置(应用隐身在哪里设置红米)

    应用隐身在哪里设置(应用隐身在哪里设置红米)

  • 微博能不能设置不让某个人看(微博能不能设置别人看不到我的关注)

    微博能不能设置不让某个人看(微博能不能设置别人看不到我的关注)

  • 苹果手机已停用请在14分钟使用是什么情况(苹果手机已停用怎么办才能解开)

    苹果手机已停用请在14分钟使用是什么情况(苹果手机已停用怎么办才能解开)

  • 荣耀x10什么时候发行(荣耀X10什么时候可以升级鸿蒙3.0正式版)

    荣耀x10什么时候发行(荣耀X10什么时候可以升级鸿蒙3.0正式版)

  • 华为白色圆点怎么关掉(华为 白色圆点)

    华为白色圆点怎么关掉(华为 白色圆点)

  • 爱奇艺账户能够同时几个手机使用(爱奇艺号码登录能用几个人啊)

    爱奇艺账户能够同时几个手机使用(爱奇艺号码登录能用几个人啊)

  • oppo手机正在运行的程序怎么关闭(oppo手机正在运行的应用怎么显示出来)

    oppo手机正在运行的程序怎么关闭(oppo手机正在运行的应用怎么显示出来)

  • 淘宝每日必抢入口在哪(淘宝每日必买红包怎么领)

    淘宝每日必抢入口在哪(淘宝每日必买红包怎么领)

  • 进程实体是由哪三部分组成(进程实体由哪四部分组成)

    进程实体是由哪三部分组成(进程实体由哪四部分组成)

  • 电脑enter是什么意思(电脑enter键有什么用)

    电脑enter是什么意思(电脑enter键有什么用)

  • ipad pro11可以接鼠标吗(ipadpro11能用typec耳机吗)

    ipad pro11可以接鼠标吗(ipadpro11能用typec耳机吗)

  • 拼单与单独购买的区别(拼单与单独购买质量一样吗)

    拼单与单独购买的区别(拼单与单独购买质量一样吗)

  • 剪映怎么手动添加滚动字幕(剪映怎么手动添加同步字幕)

    剪映怎么手动添加滚动字幕(剪映怎么手动添加同步字幕)

  • 微信添加好友历史记录(微信添加好友历史记录怎么查看)

    微信添加好友历史记录(微信添加好友历史记录怎么查看)

  • 直播的时候怎么放音乐(直播的时候怎么上架商品)

    直播的时候怎么放音乐(直播的时候怎么上架商品)

  • i7cpu温度90度会坏吗(i7温度90度会坏吗)

    i7cpu温度90度会坏吗(i7温度90度会坏吗)

  • 金立m6怎样关闭故事锁屏(金立怎么关闭)

    金立m6怎样关闭故事锁屏(金立怎么关闭)

  • 递减是降序还是升序(递减是降序还是排序)

    递减是降序还是升序(递减是降序还是排序)

  • 红米手机的usb调试在哪里(红米手机usb调试开关在哪)

    红米手机的usb调试在哪里(红米手机usb调试开关在哪)

  • 苹果x摄像头是哪家的(苹果x摄像头是蓝宝石玻璃吗)

    苹果x摄像头是哪家的(苹果x摄像头是蓝宝石玻璃吗)

  • whatsapp怎样解除群(whatsapp怎么解禁)

    whatsapp怎样解除群(whatsapp怎么解禁)

  • wps怎么调整页面顺序(wps怎么调整页面排版顺序)

    wps怎么调整页面顺序(wps怎么调整页面排版顺序)

  • 外部奖励与内部奖励
  • 运输费劳务是否可以扣除
  • 广告公司与广告公司合作的协议
  • 会计凭证包括哪三种
  • 核定征收可以不开免税普票吗
  • 销售费用可以提取现金吗
  • 无形资产摊销为什么计入管理费
  • 审计库存现金盘点方法
  • 长期股权投资成本法核算
  • 企业购车保险费怎么做会计分录
  • 外资企业银行贷款限制
  • 未结清全额是逾期吗
  • 增值税发票可以抵税吗
  • 提供部分原料的英文
  • 小规模纳税人开专票和普票的区别
  • 意外保险计入职工薪酬
  • 计算房产税时容积率怎么算
  • 免税农产品的范围有哪些
  • 政府补助怎么开票入账
  • 开具红字增值税专用发票是什么意思
  • 待认证进项税额是什么情况下用的
  • 小额零星业务上限是多少
  • 建账实收资本怎么处理
  • 电子钥匙到期怎么办
  • 出口报关和不报关的区别
  • 免租期间房产税计税依据
  • 冲减预付账款是什么意思
  • 企业间贴现手续费怎么记账?
  • 开发成本怎么核算
  • 农村土地承包经营权证丢失怎么补办
  • 商品先入库后得发票如何做账
  • 蒙特利尔 攻略
  • 商品流通企业库存商品的核算方法主要有
  • less预处理器详解
  • 花卉苗木栽培技术
  • php中删除文件的函数
  • 阿里pv
  • 冲减预提成本分录
  • 生产企业支付的车间劳务外包费入账科目
  • 支票小写金额前的羊
  • 帐没做完怎么报增值税
  • 资产减值损失属于营业外支出吗
  • phpcms是什么
  • phpcms建站流程
  • 应收保费核算什么业务
  • 社会团体指的是什么单位
  • 血液制品增值税税率
  • sqlserver2005 xml字段的读写操作
  • 建筑劳务公司需要什么资质
  • 租入厂房再转租新租赁准则如何处理
  • 货款已退回货已收到怎么办
  • 银行存款一直没有记账怎么调整
  • 收到预付款项发票怎么开
  • 社保滞纳金可以免除吗
  • 税后净利润弥补亏损分lu1
  • 经纪代理代订机票差额专票抵扣
  • 中介费可以要求退吗
  • 年终奖会计怎么走账
  • 接受其他企业现金捐赠会计分录
  • 会计账簿按用途分类分为
  • 会计入门技巧
  • 奖励罚款怎么做分录
  • win8系统怎么查看隐藏文件
  • 3种不用重装的手机
  • CentOS 5.4+OpenVZ+Vtonf打造VPS服务器的方法
  • 更新win8
  • win10 win8.1双系统
  • windows隐藏分区
  • 使用jquery操作dom
  • css如何用
  • 批处理文件是可执行文件吗
  • javascript总结笔记
  • javascript产生随机数
  • 编写javascript代码
  • html做一个新闻app首页
  • 怎么在手机开数据那里看用了多少流量
  • 企业购买小轿车一辆会计分录
  • 房产税怎么计提和缴纳分录
  • 全国书法等级考试官网
  • 税务注销证明样本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设