2、Element
概述：CV工程师上线（啊不是2.1 快速入门
【Vue前端框架基础+Element的使用】官网：Element官网（基于Vue2.x）
- 引入 Element 的 Css、JS 以及 Vue.js
<script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/element-ui/lib/index.js"></script><link rel="stylesheet" href="https://www.huyubaike.com/biancheng/element-ui/lib/theme-chalk/index.css"> - 创建 Vue 核心对象
new Vue({el:"#app"}) - 复制官网 Element 组件代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">删除</el-button></el-row><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/element-ui/lib/index.js"></script><link rel="stylesheet" href="https://www.huyubaike.com/biancheng/element-ui/lib/theme-chalk/index.css"><script>new Vue({el:"#app"})</script></body></html>
- 通过基础的 24 分栏，迅速简便地创建布局 。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数 。
- 代码示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}</style></head><body><div id="app"><el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/element-ui/lib/index.js"></script><link rel="stylesheet" href="https://www.huyubaike.com/biancheng/element-ui/lib/theme-chalk/index.css"><script>new Vue({el:"#app"})</script></body></html>推荐阅读
- 7.Vue常用属性
- Vue3的新特性
- 2022-11-4 VideoPipe可视化视频结构化框架新增功能详解
- 20_Vue如何监测数组类型数据发生改变的？
- 我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang
- 荣耀50值得买吗_荣耀50性价比高吗
- 19_Vue如何监测到对象类型数据发生改变的？
- 分布式事务框架 Seata 入门案例
- Rock18框架之整体框架介绍
- 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
