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

  • 印花税申报是含税收入还是不含税收入
  • 贷款损失税前扣除
  • 税务师考试咨询电话
  • 运输途中的合理损耗
  • 成品油红字发票开错了
  • 行政单位总账科目
  • 用友T3怎么结转上年数据
  • 反写了可以重新申报吗
  • 会计净额法和总额法
  • 银行付款回单怎么看
  • 商铺出租怎么做账
  • 电子承兑到期怎样兑现
  • 不得抵扣的会计分录
  • 投资性房地产计量模式的转换
  • 工程预付款包括工人工资吗
  • 应交税费账户期末借方余额反映的是
  • 小企业盈余公积弥补亏损分录
  • 关联企业无偿使用土地
  • 防洪费2019年税率
  • 公司借出的私人物品
  • 房产企业竞标取消通知
  • 建筑业简易征收进项税额转出
  • 个体户怎
  • 工厂材料成本改善报告范文
  • 小规模增值税免税额
  • caxa电子图板2007教程
  • 偶然所得怎么缴纳个人所得税免税
  • 电脑如何进入bios设置
  • win11多开
  • 公司法人向公司借款未还,公司可以倒闭吗
  • dvd.rom
  • php对象缓存
  • 存货销售收入
  • 麦地那老城
  • 用php做计算
  • laravel怎么用
  • vue跨域的几种方式
  • 多模手机
  • ICLR2023《Crossformer: Transformer Utilizing Cross-Dimension Dependency for Multivariate Time Series》
  • 编程前十名
  • 一个惊艳了
  • grub-install --target
  • 政府补助收入是免税收入还是不征税收入
  • 现金和现金等价物包括哪些
  • 现金折扣什么时候冲减收入
  • php sleep()
  • 电子发票可以作废吗?当月
  • 差旅费会计科目怎么做
  • 员工欠薪怎么办
  • 销售过程中发生的商业折扣计入
  • 应收账款收不回来怎么处理比较好
  • 货代代缴增值税关税如何做账
  • 商业地产会计账务怎么做
  • 去年的账科目记错了怎么办
  • 一般纳税人网上申报流程
  • sqlserver2005附加数据库错误1827
  • mysql8.0环境配置
  • java开发经常出差合理吗
  • windows7 设置
  • linux系统讲解
  • windowsxp桌面图标消失
  • ssgrate.exe - ssgrate是什么进程
  • windows的视频
  • windows8怎么进入bios
  • macos 安装win7
  • win7切换输入法不见了怎么弄出来
  • windows to go教程
  • 批量win10激活码怎么弄
  • 搭建android开发环境需要用到哪些工具
  • js随机抽取姓名
  • (cocs2dx)二、 利用Eclipse编译apk应用
  • opengl绘制坐标轴
  • 批处理实例
  • 原生js实现promise
  • unity3D游戏开发
  • 个人可以到税务开物业费的
  • 现在德国的普通话怎么样
  • 餐饮业如何缴纳增值税
  • 新疆捡陨石地方叫什么
  • 北京市地方税务局在哪
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设