1.通过脚手架创建一个项目
# 输入
npm run dev
# 启动项目
ctrl+c
关闭服务
2.在vue脚手架项目中安装elementui
- 安装elementui依赖
npm i element-ui -S
- 使用elementui
# 引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
# 在main.js中进行全局注册
Vue.use(ElementUI);
2.使用路由router
- 1.创建组件
2.注册组件
3.放到App.vue中
3.Loyout组件
通过基础的24分栏
在element ui中布局组件将页面划分为多个行row,每行最后分为24栏(列)
3.1使用Layout组件
<el-row>
<el-col :span="8">
<div style="border: 1px red solid;">占用6份</div>
</el-col>
<el-col :span="8">
<div style="border: 1px red solid;">占用6份</div>
</el-col>
<el-col :span="8">
<div style="border: 1px red solid;">占用6份</div>
</el-col>
</el-row>
注意:
- 在一个布局组件中是由row和col组合而成
- 在使用时候要区分row属性和col属性
3.2属性的使用
- 行属性使用
<el-row :gutter="50" tag="span">
<el-col :span="2">
<div style="border: 1px red solid;">占用6份</div>
</el-col>
<el-col :span="4">
<div style="border: 1px red solid;">占用6份</div>
</el-col>
<el-col :span="12">
<div style="border: 1px red solid;">占用6份</div>
</el-col>
<el-col :span="6">
<div style="border: 1px red solid;">占用6份</div>
</el-col>
</el-row>
- 列属性使用
<h1>layout组件中使用偏移</h1>
<el-row>
<el-col :span="12" :offset="4" :push="3"><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>
4.Container布局容器
4.1创建布局容器
用于布局的容器组件,方便快速建造页面的基本结构:
<el-container>:外层容器。当子元素中包含<el-header>或<el-footer>时,全部子元素会垂直上下分开,否则会水平左右分开。
4.2容器中包含的子元素
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。