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

  • aisino金税盘怎么安装在电脑上
  • 采购材料的进项税
  • 对外投资应由
  • 分红给合伙企业后,被普通合伙人借走
  • 出口退还增值税消费税的,是否退还教育费附加
  • 什么是本期应纳税所得额
  • 实用9%税率的
  • 空调的折旧年限和残值率
  • 国际货物运输07113
  • 房地产开发企业预收款预缴增值税
  • 如何设置处理器个数如何设置显示器超频
  • 生产车间用电产品有哪些
  • 银行汇兑怎么做账
  • 电费做其他业务收入的账务处理怎么做?
  • 供应销用商品给的返利怎么做?
  • 收据注明实际到账时间
  • 股东贷款是什么意思
  • 小型连锁药店需要报国税吗?
  • 外币结算方式有哪几种
  • 财务中不能冲销的凭证
  • 小规模纳税人需要建账吗
  • 房地产公司简易计税增值税
  • 支付销售佣金如何做账
  • 特种车辆租赁需要什么资质
  • 苹果手机下载手机克隆哪个版本
  • php与jquery
  • 最新专业版win10
  • 如何在 Windows 11 上打开 APK 文件
  • 企业出售产品前,预收客户一笔货款
  • 公司入股的钱叫什么
  • php设计思路
  • 现金溢余基本账务处理
  • 建筑安装发票可以外地开吗
  • symfony是最好的框架
  • 税控盘和金税盘的功能一样吗
  • springboot整合ssm
  • layui 使用
  • adan算法
  • 金融机构贷款准备金
  • 民办非企业开办资金入什么科目
  • 收到返利冲成本还是记收入
  • js调用自己
  • 为什么盈余公积减少,未分配利润增加
  • 生育津贴减去应发工资还是实发工资
  • 增值税发票是记账联还是抵扣联
  • mysql@变量
  • 机关事业单位购买口罩
  • 公司抽奖奖品设置
  • 建筑工程人工费调整
  • 可抵扣进项税额的六种类型
  • 固定资产清理增值税计税依据
  • 固定资产暂停使用申请怎么写
  • 工资社保医保计算
  • 接受捐赠固定资产存货等有相关凭据的其成本按什么确定
  • 维保业务怎么开展
  • 出售固定资产如何缴纳增值税
  • 工会筹备金该按什么计算
  • 增值税专用发票开了有什么用
  • 新冠肺炎疫情相关租金减让适用简化处理方法的时间范围
  • 实收资本怎么入账?
  • 无形资产什么时候开始计提折旧
  • 资金会计应当设置的科目
  • mysql5.7.19 zip 详细安装过程和配置
  • sql server常用管理工具中,用于访问
  • mongodb与mysql相比的优缺点
  • sqlalchemy merge
  • solaris 修改用户 主目录
  • ubuntu vnc远程
  • 怎么把iphone作为u盘
  • Stacmon.exe - Stacmon是什么进程 有何作用
  • windows xp能装微信吗
  • win10怎么把系统盘迁移到另一块盘
  • alt+r没用
  • div+css网页布局实例
  • Node.js中的什么模块是用于处理文件和目录的
  • nodejs中使用HTTP分块响应和定时器示例代码
  • shell脚本创建多级目录
  • 纳税申报模拟
  • 个人所得税税单去哪里打印
  • 个人所得税必须企业代扣代缴吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设