ElementUI 学习 (启航与组件)

目录

• ElementUI 引言
• 安装Element UI
• 开始使用
  • 启动
  • 安装
  • 使用
  • 关于HTML 中修改布尔值
• 布局组件
  • 基本布局
    • 属性使用
      • 行属性使用
      • 列属性使用
  • 容器布局
    • 创建布局容器
      • 容器中包含的子元素
      • 容器的嵌套使用
      • 水平容器
      • 垂直容器

ElementUI 引言

基于Vue 框架的UI 技术,网站快速成型工具 和 桌面端组件库

官网寻址

安装Element UI

通过vue脚手架创建项目

vue init webpack element(项目名)

关于安装缓慢问题
在上述操作执行前执行如下代码

cnpm  install --save-dev webpack

往期参考

跳转链接

开始使用

启动

启动指令：
在该项目目录结构下

npm start 

启动效果：

安装

在vue脚手架项目中安装elementUI

1.下载elementui的依赖

npm i element-ui -S

2.指定当前项目中使用elementui

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

3、在vue脚手架中使用elementui

Vue.use(ElementUI);

使用

可以参考Vue 学录 （第四章）
链接跳转

代码编写：

效果展示：

关于HTML 中修改布尔值

注意： 推荐直接写 underline=“false”

target="_blank" 默认以新窗口的形式打开

布局组件

基本布局

通过基础的 24 分栏，迅速简便地创建布局

官网链接参考

属性使用

注意:

• 在一个布局组件中 是由 row 和 col 组合而成
• 在使用时要区分 row属性 和 col属性

行属性使用

<el-row :gutter="50" tag="span">
  <el-col :span="4"><div style="border: 1px red solid;">占用4份</div></el-col>
  <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
  <el-col :span="3"><div style="border: 1px red solid;">占用3份</div></el-col>
  <el-col :span="9"><div style="border: 1px red solid;">占用9份</div></el-col>
</el-row>

列属性使用

<el-row>
  <el-col :span="12" :offset="9" :psuh="3" xs><div style="border: 1px blue solid;">我是占用12分</div></el-col>
  <el-col :span="6"><div style="border: 1px blue solid;">我是占用6分</div></el-col>
</el-row>

---

注意：push 相当于右浮动（不影响下一行布局），offset 会将下一行挤开

容器布局

Container 布局容器组件

创建布局容器

<el-container>
	
</el-container>

容器中包含的子元素

<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。

容器的嵌套使用

<!--创建容器-->
<el-container>
  <!--header-->
  <el-header><div><h1>我是标题</h1></div></el-header>
  <!--容器嵌套使用-->
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜单</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
  </el-container>
  <el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>

水平容器

<el-container direction="horizontal">
  <!--header-->
  <el-header><div><h1>我是标题</h1></div></el-header>
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜单</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
  </el-container>
  <el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>

注意:当子元素中没有有 el-header 或 el-footer 时容器排列为水平

垂直容器

<el-container direction="vertical">
  <!--header-->
  <el-header><div><h1>我是标题</h1></div></el-header>
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜单</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
  </el-container>
  <!--footer-->
  <el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>

---