一、 全局配置
大纲：
- 使用Vue UI创建，管理项目
- 项目结构目录整理
- 初始文件添加
- 基本配置讲解
- 跨域配置
先定义基础路径1
2
3
4
5const BASE_URL = process.env.NODE_ENV === 'procution' ? '/iview-admin' : '/'
module.exports = {
lintOnSave: false,
baseUrl: BASE_URL, //定义项目基本路径，需要判断当前是何环境，路径可根据需要自定义，根目录为'/'
二、 路由、鉴权
大纲：
- 3.0的导航菜单跳转方式
- 根据当前路由自动选中对应的菜单
- 在路由级别对页面做鉴权
- 根据不同平台动态路由不用组件
三、布局
大纲：Gird（栅格）
- Gird的基本用法
- Gird的使用技巧
- Gird响应式布局的用法
- Layout各组件讲解及源码分析
- 常见的布局模式分析
- 实战：利用Layout及其他组件，完成后台框架搭建
- Gird的基本用法
1
2
3
4
5
6
7
8
9
10
11
12
13<template>
<div id="app">
<Row > <!-- gird布局由一对Row标签包裹若干Col标签组成 -->
<Col v-for="n in 24" span="1">
<!-- grid布局将页面分为24格，span是定义每个Col占几格 -->
<!-- Col中如果没有内容，默认宽度为0，不能撑开页面; -->
<Card :title="n">
{{ n }}
</Card>
</Col>
</Row>
</div>
</template>
效果如下：
span的总和应为24，超过24的就会折行。
间隔：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<template>
<div id="app">
<Row :gutter="16"> <!-- :gutter属性设置了每个Col之间的间隔，其值最好是16+8*n -->
<Col span="8">
<Card>内容1</Card>
</Col>
<Col span="8">
<Card>内容2</Card>
</Col>
<Col span="8">
<Card>内容3</Card>
</Col>
</Row>
</div>
</template>
效果如下：
固定：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<template>
<div id="app">
<Row :gutter="16">
<Col span="16">
<Card>
<div style="height: 600px;"></div>
</Card>
</Col>
<Col span="8">
<Affix> <!-- 固定标签，会固定在页面的某个位置 -->
<Card>
<div style="height: 200px;"></div>
</Card>
</Affix>
</Col>
</Row>
</div>
</template>
效果如下：
多个元素排列，某个元素固定：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<template>
<div id="app">
<Row :gutter="16">
<Col span="16">
<Card>
<div style="height: 600px;"></div>
</Card>
</Col>
<Col span="8">
<Card>
<div style="height: 200px;"></div>
</Card>
<Affix> <!-- 会等到上面的card滚动消失后才进行固定定位 -->
<Card>
<div style="height: 200px;"></div>
</Card>
</Affix>
</Col>
</Row>
</div>
</template>
在某处固定：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<template>
<div id="app">
<div style="width:100%;height:50px;position: fixed; left:0;top: 0;z-index:10;background: red;"></div>
<Row :gutter="16">
<Col span="16">
<Card>
<div style="height: 600px;"></div>
</Card>
</Col>
<Col span="8">
<Card>
<div style="height: 200px;"></div>
</Card>
<Affix :offset-top="50"> <!-- 会在距离顶部50像素的地方进行固定定位 -->
<Card>
<div style="height: 200px;"></div>
</Card>
</Affix>
</Col>
</Row>
</div>
</template>
效果如下：
- Gird的使用技巧
垂直居中：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<template>
<div id="app">
<Row type="flex" justify="center" align="middle"> <!-- 垂直居中 -->
<Col span="4">
<Avatar src="http://img2.imgtn.bdimg.com/it/u=1808476677,3909862815&fm=26&gp=0.jpg" shape="circle"></Avatar>
<!-- 图片标签，shape制定了形状，square是方形，circle是圆形 -->
</Col>
<Col span="16">
<Card>
<p>本节课讲解了 iView 的 24 列栅格布局的基础用法，包括 24 列栅格系统的介绍和用法、多列布局、间距、固定列布局等常见模式；栅格布局的使用技巧，包括垂直居中的实现、两边留空；响应式布局的详细用法。本节课讲解了 iView 的 24 列栅格布局的基础用法，包括 24 列栅格系统的介绍和用法、多列布局、间距、固定列布局等常见模式；栅格布局的使用技巧，包括垂直居中的实现、两边留空；</p>
</Card>
</Col>
<Col span="4">
<Icon type="ios-checkmark" style="font-size: 40px;"></Icon>
</Col>
</Row>
</div>
</template>
效果如下：
占位（平移）：1
2
3
4
5
6
7
8
9
10
11
12<template>
<div id="app">
<Row>
<Col span="6" offset="1"> <!-- offset是设置当前列平移一个格子 -->
<Card><div style="height: 200px"></div></Card>
</Col>
<Col span="16">
<Card><div style="height: 600px"></div></Card>
</Col>
</Row>
</div>
</template>
效果如下：
- Gird响应式布局
// xs < 768px
// sm >= 768px
// md >= 992px
// lg >= 1200px
// push
// pull
// order1
2
3
4
5
6
7
8
9
10
11
12<template>
<div id="app">
<Row>
<Col :xs="24" :sm="8"> <!-- 当屏幕小于768px时，满行显示；当屏幕大于768px时，占8个格子 -->
<Card><div style="height: 200px"></div></Card>
</Col>
<Col :xs="24" :sm="16"> <!-- 当屏幕小于768px时，满行显示；当屏幕大于768px时，占16个格子 -->
<Card><div style="height: 600px"></div></Card>
</Col>
</Row>
</div>
</template>
也可以采用对象形式接受参数，来设置更复杂效果：1
2
3
4
5
6
7
8
9
10
11
12<template>
<div id="app">
<Row>
<Col :xs="{ span:24, offset:0 }" :sm="{ span:6, offset:1 }"> <!-- 当屏幕小于768px时，满行显示且无间隙；当屏幕大于768px时，占6个格子，并且向右偏移一个格子（左边有一个格子的间隙） -->
<Card><div style="height: 200px"></div></Card>
</Col>
<Col :xs="{ span:24, offset:0 }" :sm="{ span:16, offset:0 }"> <!-- 当屏幕小于768px时，满行显示且无间隙；当屏幕大于768px时，占16个格子且无间隙 -->
<Card><div style="height: 600px"></div></Card>
</Col>
</Row>
</div>
</template>
- Layout常见结构：
页面基本样式：