Element UI学习

记录跟着青戈学毕设，一切来源于B站up主 @程序员青戈

一、下载与安装

Element UI官网 https://element.eleme.cn/#/zh-CN

npm安装

npm i element-ui -S

安装若是很慢就用镜像，我是直接就成功了。
如下图就安装成功

二、使用

1.引入 Element

在main.js中写入以下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI, {
    size: 'small' }); //small指的是小尺寸，官方提供了3种尺寸small，mini，默认，通常用small

插入位置如下

2.创建新页面

在router文件中新增路由指向新增页面

  {
   
    path: '/element',
    name: 'Element',
    component: () => import('../views/Element.vue')
  }

1.点击运行
2.得到url，点击链接
3.输入 /新增页面名称

三、组件

官网有丰富且完备的组件说明

• 布局：分为24栏，可以十分方便的设置布局 <el-row> 行 <el-col> 列
  row 行组件 提供 gutter属性来指定每一栏之间的间隔，默认间隔为 0。
  col 列组件 通过 span 属性来指定列占多少栏
  

• 按钮：<el-button> 提供有多个样式可以直接使用
  使用type、plain、round和circle属性来定义 Button 的样式。
  type 有 primary、success、info、warning、danger
  -

• 表单：（表单组件必须有v-model属性）
  el-input 搜索框、
  el-autocomplete 带搜索建议的搜索框（可以用作搜索联想）、
  el-select 下拉框 搭配el-option 使用，filterable 下拉框可搜索属性、
  el-radio单选框 搭配el-radio-group 使用、
  el-checkbox 复选框 搭配el-checkbox-group 使用
  el-date-picker 日期时间选择器

• 表格
  当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名，可以使用width属性来定义列宽，stripe属性可以创建带斑马纹的表格，border属性设置边框

代码如下：

<template>
    <div>
        <el-row style="margin: 20px">--------------------布局--------------------</el-row>
        <el-row :gutter="10">
            <el-col :span="12"><div style="width: 100%; height: 100px; background-color: aqua"></div></el-col>
            <el-col :span="6"><div style="width: 100%; height: 100px; background-color: red"></div></el-col>
            <el-col :span="3"><div style="width: 100%; height: 100px; background-color: pink"></div></el-col>
            <el-col :span="3"><div style="width: 100%; height: 100px; background-color: green"></div></el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <div style="border: 1px solid #ccc;padding: 10px;text-align: center">
                    <img style="width: 50%" src="@/assets/logo.png">
                    <div>这是Vue的logo</div>
                    <div style="color: red">价格 ￥99.99</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="border: 1px solid #ccc;padding: 10px;text-align: center">
                    <img style="width: 50%" src="@/assets/logo.png">
                    <div>这是Vue的logo</div>
                    <div style="color: red">价格 ￥99.99</div>
                </div>
            </el-col>