当前位置:  首页  >  PHP资讯  >  业界资讯

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

这篇文章主要介绍了使用vue.js2.0+ElementUI开发后台管理系统详细教程(一)的相关资料,需要的朋友可以参考下

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开发后台管理系统详细教程(二),敬请关注!

以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4