vue学习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

看element-ui官方文档

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’