Element UI 页面开发

Element入门

• 什么是Element UI

• Element UI 设计原则

• Element UI 导航

• Element UI的安装

• 第一个Element UI程序

• Element UI案例：按钮点击

• Element：输入框

Element组件与布局

Basic

• Element：Layout布局 实例：Elenment：导航栏+侧边栏+基础表格
• Element：Container布局容器
• Element：数据传递
• Element： 按钮
• Element：文字链接
• Element：导航
• Element：表格
• Element: 卡片

Form

• Element：输入框
• Element：单选按钮
• Element：多选按钮
• Element：表单

组件的组合

• Element：导航栏+基础表格
• Elenment：导航栏+侧边栏+基础表格

Element组件化开发

• Vue的基本概念介绍、使用Hbuilder 创建最简单Vue应用
• 使用Hbuilder 创建Vue应用 、vue中的export default、vue中的render函数
• Windows 安装Node.js、Windows 安装vue、npm 安装模块、cnpm 安装模块
• 模块化开发： 创建Element应用
• 案例：模块化开发： 创建Element控制面板

Element路由与多页面

从零开始简单的路由

这个简单路由 不推荐大家学了，

有兴趣的可以自己看。

直接看下面的Vue Router即可。

• 创建带路由的Vue2项目

使用Vue Router开发单页应用

• Vue从入门到实战：感受前端路由
• Vue从入门到实在：模块化开发使用路由

• 创建带路由的Element项目

拓展：

• Vue从入门到实战：动态路由匹配
• Vue从入门到实战：嵌套路由
• Vue从入门到实战：命名路由

页面的切换

• Element UI : 首页根据不同条件显示不同页面

Element 增删改查

• Vue案例：学生信息增删查改

Element文件操作

• Element：导出数据到Excel
• lement-UI 导出Table表格报错 TypeError: Cannot read properties of undefined (reading ‘utils‘)
• 使用Element-UI中的Upload控件上传文件 （Vue + Flask）

Element 数据可视化

• Element+Echarts：安装Echarts
• Element+Echarts：绘制折线图
• Element+Echarts：绘制饼图
• Element+Echarts: 绘制柱状图
• Element+Echarts：制作可视化卡片
• Element+Echarts：模块化开发中使用可视化卡片

Element前后端通信

• Element： 通知
• Element： 消息提示
• Element： 弹框
• Element： 对话框
• Axios的安装
• Vue.js Ajax(axios)
• Element UI+Flask前后端传参

官网：https://element.eleme.cn/#/zh-CN/component/installation