vue 框架之 Element-UI
# 找一个空目录 vue create ele_project # 依次选择 Manually select features Choose Vue version - Babel - Router 2.X 使用history模式 y In package.json 是否把当前配置作为以后创建项目的预设配置? n
# cd命令 进入 ele_project 文件夹内部
cd ele_project
# 安装
npm install --save element-ui
3.
// 在 main.js 中引入配置ElementUI import ElementUI from 'element-ui' //引入element-ui包 import 'element-ui/lib/theme-chalk/index.css' //引入element-UI 样式 Vue.use(ElementUI) //使用
4.开始使用。
4.1启动服务:
# 在 ele_project 项目目录内执行命令 npm run serve # 访问 http://localhost:8080/
4.2
<template> <div> <el-button>普通按钮</el-button> <el-button type="primary">主要按钮</el-button> </div> </template>
4.3
import Button from '../views/Button.vue' const routes = [ { path: '/button', name: 'Button', component: Button }, ... ]
element的组件属性可以在上面的网址查看 内容很多就不一一介绍了
由于element 样式比较固定 和多时候适用于 后台管理网站的开发 接下来就简单介绍下 搭建个网页大结构
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <el-menu class="el-menu-demo" mode="horizontal"> 2 <el-menu-item>指南</el-menu-item> 3 <el-menu-item>组件</el-menu-item> 4 <el-menu-item>主题</el-menu-item> 5 <el-menu-item>资源</el-menu-item> 6 </el-menu>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <el-menu class="el-menu-demo" mode="horizontal" default-active="2"> 2 <el-menu-item index="1">指南</el-menu-item> 3 <el-menu-item index="2">组件</el-menu-item> 4 <el-menu-item index="3">主题</el-menu-item> 5 <el-menu-item index="4">资源</el-menu-item> 6 </el-menu>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <el-menu class="el-menu-demo" mode="horizontal" default-active="2"> 2 <el-menu-item index="1">指南</el-menu-item> 3 <el-submenu index="2"> 4 <span slot="title">组件</span> 5 <el-menu-item>组件示例</el-menu-item> 6 <el-menu-item>组件使用文档</el-menu-item> 7 </el-submenu> 8 <el-menu-item index="3">主题</el-menu-item> 9 <el-menu-item index="4">资源</el-menu-item> 10 </el-menu>
基本结构如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <el-menu class="el-menu-vertical-demo" 2 mode="vertical" 3 default-active="2"> 4 .... 5 </el-menu>
<el-container>
容器 内部可以盛放后四种组件。
<el-header>
header
内用于编写页面头部部分。
<el-aside>
aside
内用于编写页面侧边栏部分。
<el-main>
main
内用于编写页面主体内容部分。
<el-footer>
footer
内用于编写页面页脚部分.
ElementUI
布局组件的使用规则:
-
布局组件包含上述5个组件。
-
el-container
的子元素只能是后四个组件(也可以嵌套container
)。后四个组件的父元素只能是el-container
。 -
el-container
拥有属性direction
来控制子元素的排列方向,可以是水平(direction='horizontal'
),可以是垂直(direction='vertical'
) -
默认情况下,若
el-container
包含header
或footer
,则会垂直方向排列。否则默认情况下水平方向排列。