Vue-Element-UI框架手册


一，基础

1.安装Node

Linux建议使用docker安装
Windows可以通过软件安装
新版本Node自带Npm

2.安装VueCli

新版本安装语法

1
npm install -g @vue/cli

二、Element-UI

1.基础配置

官方网站：https://element.eleme.cn/
在main.js中导入element-ui

1
2
3
4
5
6
7
8
9
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

如果需要国际化

1
2
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })

2.布局

栅格

总共24个栅格，按比例均分

1
2
3
4
5
<el-row :gutter="30" type="flex" justify="">
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

间隔：gutter属性来指定每一栏之间的间隔，默认间隔为 0
偏移：通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数，或者push/pull进行右移/左移
弹性：将 type属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify属性来指定其中的值来定义子元素的排版方式
start（默认，靠左侧），end（靠右侧），center（居中）， space-between（居中分散），space-around （居中分散，两端留空）
注：如果栅格填满了24份，justify体现不出效果。
justify是flex 布局下的水平排列方式；align是flex 布局下的垂直排列方式，可选top/middle/bottom，默认在top
响应式：参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

1
2
3
4
5
6
<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
名称 尺寸
xs <768px
sm ≥768px
md ≥992px
lg ≥1200px
xl ≥1920px
  • hidden-xs-only - 当视口在 xs 尺寸时隐藏
  • hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
  • hidden-lg-and-up - 当视口在 sm 及以上尺寸时隐藏
    以此类推搭配使用

容器

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
：顶栏容器。
：侧边栏容器。
：主要区域容器。
：底栏容器。
可以多级嵌套，通过width和height属性调整容器

样式

属性可以动态绑定
:disabled="true"
圆角：border-radius：0px
基础投影：box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
浅色投影：box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

图标

直接通过设置类名为 el-icon-iconName 来使用即可

1
2
<i class="el-icon-edit"></i>
<el-button type="primary" icon="el-icon-search">可以嵌套在按钮中</el-button>

按钮

1
2
<el-button>按钮参数</el-button>
<el-button-group>成为按钮组标签，即按钮联排</el-button-group>

type，类型：primary / success / warning / danger / info （五大类：主成警危信）以及 text（文字按钮）
size，尺寸：medium、small、mini
plain，朴素
round，圆角
circle，椭圆
disabled，禁用
icon，图标
loading，加载中

超链

1
<el-link href="url" target="_blank" type="">默认链接，新窗口跳转</el-link>

type，类型：primary / success / warning / danger / info （五大类：主成警危信）
disabled，禁用
underline，下划线
href，超链接
icon，图标

3.表单

单选（radio）

建议用单选框组替代普通单选
注意双向绑定，若js中无对应数据的变量（值可以为空），则无法选择
按钮组/带边框

多选（checkbox）

建议用多选框组替代普通多选
半选状态/可选项目数量限制/按钮组/边框

输入框（input）

placeholder，给个提示
clearable，清空该输入框
show-password，切换显示密码
prefix-icon/suffix-icon，首尾显示图标
（或slot="prefix/suffix"方式）
首尾显示固定内容

1
2
3
4
<el-input placeholder="请输入内容" v-model="input1">
 <template slot="prepend">Http://</template>
 <template slot="append">.com</template>
</el-input>

输入建议（联想词）：激活即列出输入建议/输入后匹配输入建议/远程搜索/自定义模板
输入长度限制

计数器（inputnumber）

max/min可以设置最大最小值，controls-position控制按钮位置
step控制步长，step-strictly严格步长（不接受其他数值）
precision设置精度，调整小数

选择器（select）

即下拉菜单，v-model的值为当前被选中的el-option的 value 属性值。
可禁用其中某项，可多选/分组/远程搜索/自定义模板/创建不在列表中的元素
可清空。设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选

级联选择器（cascader）

下拉菜单带子菜单，可清空，可多选，可搜索，动态加载懒加载。
可以设置选择全部层级或最后一级。

开关（switch）

设置颜色、文字、value类型、禁用

滑块（slider）

可拖拽、禁用、自定义范围、设置离散、带输入框、设置竖向。

时间选择器（timepicker）、日期选择器（datepicker）、日期时间选择器（datetimepicker）

固定/任意时间点/范围
可带快捷选项、选择年月周、多选日期

上传（upload）

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。
照片墙/文件缩略图/图片列表缩略图/上传文件列表控制/拖拽上传/手动上传

评分（rate）

设置区分颜色、辅助文字、图标、只读运行出现半分

颜色选择器（colorpicker）

可以带默认值、选择透明度、设置尺寸

穿梭框（transfer）

左侧的内容发送到右侧，右侧发送到左侧。可以搜索
可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

表单（form）

综合上述
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
表单样式可以管理，设置校验规则，新增项目

4.数据

表格（table）

斑马纹、边框、状态、固定表头/列（或全锁定）、流体高度、多级表头、进行单多选、排序筛选、行展开、树形数据与懒加载、自定义表头、表尾合计
多行或多列共用一个数据时，可以合并行或列
自定义索引

标签（tag）

基础：五大状态标签
可移除、动态编辑、不同主题

进度条（progress）

线形进度条、百分比内显、自定义颜色、环形进度条、仪表盘形进度条

树形控件（tree）

用清晰的层级结构展示信息，可展开或折叠。
可选择、可禁用、懒加载、设置默认展开和选中、节点过滤、手风琴模式、设置拖拽

分页（pagination）

设置最大页码按钮、带有背景色的分页、调整每页显示条数、直接前往

标记（badge）

展示新消息数量
自定义最大值，超过了就是99+
自定义内容、小红点

头像（avatar）

方圆头像
支持三种类型：图标、图片和字符
图片加载失败的 fallback 行为

5.警示

警告（alert）

页面中的非浮层元素，不会自动消失。
可以设置主题，自定义关闭按钮，带图标，文字居中，辅助文字介绍

加载（loading）

区域加载：在表格等容器中加载数据时显示。
也可以设置整页加载
可自定义加载文案、图标和背景色。

消息提示（message）

从顶部出现，3 秒后自动消失。可以添加关闭按钮。设置文字居中

弹窗（messagebox）

设置弹窗包含确认、取消、输入内容

通知（notification）

悬浮出现在页面角落，显示全局的通知提醒消息。
可以设置是否自动关闭，带图标和状态，自定义弹窗位置或偏移

6.导航

导航菜单（navmenu）

为网站提供导航功能的菜单，设置顶栏或侧栏，可以折叠

标签页（tabs）

分隔内容上有关联但属于不同类别的数据集合
设置选项卡、卡片化、设置位置、动态增减标签页

面包屑（breadcrumb）

显示当前页面的路径，快速返回之前的任意页面
设置图标分隔符

页头（pageheader）

如果页面的路径比较简单，推荐使用页头组件而非面包屑组件

下拉菜单（dropdown）

将动作或菜单折叠到下拉菜单中
设置出发对象/方式

步骤条（steps）

设置含状态的步骤，增加描述和图标

7.其他

对话框

类似弹窗，在保留当前页面状态的情况下，告知用户并承载相关操作

文字提示（tooltip）

鼠标悬停提示，设置提示出现的方向、主题、多行提示
点击关闭提示

弹出框（popover）

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的

气泡确认框（popconfirm）

点击元素，弹出气泡确认框，Popconfirm 的属性与 Popover 很类似

卡片（card）

将信息聚合在卡片容器中展示
设置包含图片、阴影

走马灯（carousel）

即幻灯片/滚动屏
指示器可以在图内/外、设置切换箭头、卡片化、滚动方向

折叠面板（collapse）

通过折叠面板收纳内容区域，可同时展开多个面板，面板之间不影响
手风琴效果，每次只能展开一个面板
自定义面板标题

时间线（timeline）

可视化地呈现时间流信息
设置节点样式、添加内容

分割线（divider）

1
<el-divider></el-divider>

区隔内容的分割线
设置文案、垂直分割

日历（calendar）

显示日期

图片（image）

图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
可通过slot = placeholder可自定义占位内容

回到顶部（backtop）

返回页面顶部的操作按钮

无限滚动（infinitescroll）

滚动至底部时，加载更多数据。

抽屉（drawer）

有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验
可以多层嵌套

三、Vue-Cli

0.单页面Vue样例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<div id="app">
    <!--渲染数据v-bind（把data传入标签属性），绑定事件v-on（把方法函数传入标签，触发后执行）-->
    <p v-if="info.basic.location==='北京'">判断，北京</p>
    <p v-else-if="info.basic.location==='上海'">判断，上海</p>
    <p v-else>未知天气</p>
    <!--双向绑定渲染v-model，把value重新传入data，再渲染回页面-->
    <select v-model="xuanze"><option v-for="item in info.update">{{item}}</option></select>
    <button v-on:click="sayHi" v-bind:style="fengge">{{info.basic.location+xuanze}}</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data() {return{xuanze:null, info:null,fengge: "color: green"}},
        methods: {sayHi: function (event) {alert("点我的后果");}},
        mounted() {axios.get("https://www.yuhaowei.com/api/weather/?format=json&location=北京").then(
            response => {this.info = response.data.result})}})
</script>

1.初始化项目

1
2
3
4
5
6
7
8
9
#新版本指令
vue create hello-vue
#进入工程目录
cd hello-vue
#安装几个必备的依赖
npm install vue-router axios vue-axios element-ui sass-loader node-sass --save-dev
npm install
#新版本指令
npm run serve

--save/-S，安装到项目目录；--save-dev，安装到开发者目录
-g，安装到全局目录，具体安装在了哪里，要看npm config prefix的位置
删除自动生成的helloworld组件相关

2.配置路由

新建src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../views/Main";
import NotFound from "../views/NotFound";
Vue.use(VueRouter);
export default new VueRouter({
    mode:"history",
    routes: [
        {
            path: "/",
            redirect: "/main"//重定向
        },
        {
            path: "/main",
            component: Main,
            children: [
                {path: "/user/profile", component: Profile}//配置根目录，类似iframe
            ]
        },
        {
            path: "*",
            component: NotFound//设置404
        }
    ]});

3.配置App

1
2
3
4
5
6
7
8
Vue.config.productionTip = false//没用删掉
<template>
    <div id="app">
        <router-link to="/main">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-view></router-view>
    </div>
</template>

4.通信组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    export default{
        name:"XXX",
        beforeRouteEnter:(to,from,next)=>{
            console.log("进入路由之前");
            next(vm=>{
                vm.getData();
            });
        },
        methods:{
            getData:function(){
                this.axios({method:"get",url:"http://XXXXXX"}).then(function(response){
                    console.log(response)
                    this.info = response.data
                })
            }
        }
    }
</script>

to：路由将要跳转的路径
from：路由跳转前的路径
next：路由的控制参数
next()，跳到下一个页面
next("/path")，改变路由的跳转方向，使它跳到另一个路由
next(false)，返回原来的页面
next((vm)=>{})，vm是组件实例