# 找一个空目录 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 样式比较固定 和多时候适用于 后台管理网站的开发 接下来就简单介绍下 搭建个网页大结构
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>
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>
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>
基本结构如下：
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，则会垂直方向排列。否则默认情况下水平方向排列。
原文：https://www.cnblogs.com/CIBud/p/14501794.html
