Vue.js 3.x前端开发技术与实战 课件 第10章Vue3 UI框架Element Plus.pptx

教学目标掌握ElementPlus安装与配置方法。熟知ElementPlus组件库的组成与分类。学会使用Layout布局、Container布局容器来进行页面布局。学会使用配置组件进行全局配置。学会使用Form表单组件来进行表单设计。学会使用Table表格、VirtualizedTable虚拟化表格等Data数据展示组件。学会使用导航组件进行页面导航设计。1第10章Vue3UI框架ElementPlus（2学时）

210.1ElementPlus概述ElementPlus（v2.5.2）基于Vue3面向设计师和开发者的组件库，主要为开发者、设计师和产品经理提供一套基于Vue3.X的桌面端组件库。详细文档可以参见官网：https://element-plus.gitee.io/zh-CN/。由于Vue3.x不再支持IE11(IE已经宣告退市)，ElementPlus也不再支持IE浏览器（支持Edge浏览器）。ElementUI是一套为开发者、设计师和产品经理准备的基于Vue2.x的桌面端组件库。10.1.1ElementPlus安装与配置1.使用包管理器安装推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用。命令如下：npminstallelement-plus--save-dev|-Dnpminstallelement-plus--save#yarnyarnaddelement-plus#pnpm?-速度快、节省磁盘空间的软件包管理器pnpminstallelement-plus

310.1.1ElementPlus安装与配置2.CDN引用或本地引用目前可以通过/element-plus获取到最新版本的资源，在页面上引入JS和CSS文件即可开始使用。head!--导入样式--linkrel=stylesheethref=///element-plus/dist/index.css/!--导入Vue3--scriptsrc=///vue@3/script!--导入组件库--scriptsrc=///element-plus/script/head【例10-1】ElementPlus初步应用实战—显示“HelloWorld！”页面。!--?ep-10-1.html?--??!DOCTYPE?html??html?lang=en??head????meta?charset=UTF-8????meta?http-equiv=X-UA-Compatible?content=IE=edge????meta?name=viewport?content=width=device-width,?initial-scale=1.0????titleElement?Plus显示页面/title????link?rel=stylesheet?href=/element-plus/dist/index.css????script?src=/vue@3/script????script?src=/element-plus/script??/head??

4body????div?id=app??????el-button?@click=display{{?message?}}/el-button????/div????script??????const?App?=?{????????data()?{??????????return?{???message:?Hello?Element?Plus,????};????????},????????methods:?{??????????display()?{????????????alert(Hello?World!);??????????}????????},??????};??????const?app?=?Vue.createApp(App);??????app.use(ElementPlus);??????app.mount(#app);????/script??/body??/html??10.1.2ElementPlus导航一般导航会有侧栏导航和顶部导航2种类型。选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确）。1.侧栏导航可将导航栏固定在左侧，提高导航可见性，方便页面之间切换。顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中