如何使用vue.js2.0+ElementUI开发后台管理系统

这篇文章给大家分享的是有关如何使用vue.js2.0 + ElementUI开发后台管理系统的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

为电白等地区用户提供了全套网页设计制作服务，及电白网站建设行业解决方案。主营业务为成都网站设计、成都网站建设、电白网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

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

# 安装vue
 $ cnpm install vue@2.1.6
 # 全局安装 vue-cli
 $ cnpm install --global vue-cli
 # 创建一个基于 webpack 模板的新项目my-project
 $ vue init webpack my-project
 # 进入项目目录
 $ cd my-project
 # 安装依赖，走你
 $ cnpm install
 # 运行项目
 $ cnpm run dev

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

normal.

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

 $ cnpm i element-ui@1.0.9

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

4.2 引入element-ui

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

import Element from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 Vue.use(Element)

4.3 使用element-ui

将app.vue改为以下内容

4.4 预览项目,看到如图所示页面，项目的首页就搭建好了

 $ cnpm run dev

感谢各位的阅读！关于“如何使用vue.js2.0 + ElementUI开发后台管理系统”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！