提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
看element-ui官方文档
CDN知识补充
CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。(摘自百度)
如果在美国服务器上的静态资源文件被大量访问时,就在国内服务器上也保留一份
layout
- 通过 row 和 col 组件,并通过 col 组件的
span
属性我们就可以自由地组合布局。 - Row 组件 提供
gutter
属性来指定每一栏之间的间隔,默认间隔为 0。 - 通过制定 col 组件的
offset
属性可以指定分栏偏移的栏数。 - 将
type
属性赋值为'flex'
,可以启用 flex 布局,并可通过justify
属性来指定start, center, end, space-between, space-around
其中的值来定义子元素的排版方式。 - 参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。
Container
<template>
<div>
<h3>container练习</h3>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
知识点
- el-container 代表一个组件 elContainer 驼峰命名的组件引用方法加- 横杠
- 关联组件名称Container (组件对象由UIJS定义)
- main.js 引入import ‘./plugins/element.js’
- import { Container } from ‘element-ui’