element-ui学习笔记（1）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天,点击查看活动详情 >> 1.安装element ui

1.1安装vue-cli

vue init webpack element(项目名)

1.2在vue脚手架项目中安装elementui

# 1.下载elementui的依赖
	npm i element-ui -S

# 2.指定当前项目中使用elementui
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';

  //在vue脚手架中使用elementui
	Vue.use(ElementUI);

2.使用element

使用element-ui相关组件需要注意所有组件都是el-组件名称开头

1.按钮属性使用

在elementui中所有组件的属性全部写在组件标签上

按钮组的使用

<h1>按钮组</h1>
<el-button-group>
  <el-button >上一页</el-button>
  <el-button>下一页</el-button>
</el-button-group>

注意:

在element ui中所有组件都是 el-组件名称 方式进行命名

• 在element ui中组件的属性使用都是直接将属性名=属性值方式写在对应的组件标签上 按钮简单略-

---

3.链接组件

<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>

4.layout布局（栅格）

在element-ui中布局组件将页面划分为多个row ，每行可以分为24栏（列）就叫栅格系统

4.1使用layout组件

<h1>layout使用</h1>
<el-row>
  <el-col :span="6"><div style="border: 1px red solid">占用六分</div></el-col>
  <el-col :span="6"><div style="border: 1px red solid">占用六分</div></el-col>
  <el-col :span="6"><div style="border: 1px red solid">占用六分</div></el-col>
  <el-col :span="6"><div style="border: 1px red solid">占用六分</div></el-col>

</el-row>

注意：在一个布局中是由row和col组成

在使用中要区分row和col属性

5.container布局容器

创建布局容器：el-container

<h1>容器组件的使用</h1>
<el-container>
  <el-header><div style="border: #ff1440 1px solid"><h1>header</h1></div></el-header>
  <el-aside ><div style="border: aqua 1px solid"><h1>我是菜单</h1></div></el-aside>
</el-container>

容器中包含的子元素

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