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: 卡片
• Element UI+Flask前后端传参

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 安装模块
• 使用Hbuilder 创建Element应用
• 使用Hbuilder 创建Element应用2

Element路由与多页面

从零开始简单的路由

• 创建带路由的Vue2项目

使用Vue Router开发单页应用

重要：https://cloud.tencent.com/developer/article/1665197?from=15425

• Vue从入门到实战：感受前端路由
• Vue从入门到实在：模块化开发使用路由 菜鸟教程：https://www.runoob.com/vue2/vue-routing.html

• 创建带路由的Element项目

拓展：

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

Element 数据可视化

• Element+Echarts：绘制折线图
• Element+Echarts：绘制饼图
• Element+Echarts: 绘制柱状图
• Element+Echarts：制作可视化卡片

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