使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）

1. 根据指引，构建项目框架

2. 运行项目之后，会看到以下界面，恭喜你，项目环境搭建成功

3. 根据项目结构,构建项目目录

src/page/ -------------存放视图页面的目录 activeManage/ --------------------活动管理 index.vue ------------------------活动管理列表页 detail.vue ------------------------活动管理详情页 page1/2/3/4/5 -------------------分别对应：活动管理/报名管理/签到/数据统计/评价管理 activePublic/ -----------------------活动发布 index.vue -----------------------活动发布首页 step1/2/3/4 --------------------分别对应：步骤一/二/三/四

4. 搭建项目的首页

项目首页由顶部导航栏，左侧导航栏，中间内容区构成，如图

4.1 安装element-ui

建议固定vue和element-ui的版本，避免将来版本升级后产生冲突

4.2 引入element-ui

在app.vue引入element-ui，然后就可以在其他任何页面中使用了

<div class="jb51code">
<pre class="brush:ps;">
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

4.3 使用element-ui

将app.vue改为以下内容