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

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

# 安装vue $ cnpm安装[电子邮件保护] #全局安装vue-cli $ cnpm安装-全局vue-cli #创建一个基于webpack模板的新项目my-project $ vue init web pack my-project #进入项目目录$ cd我的项目#安装依赖，走你$ cnpm安装#运行项目$ cnpm运行发展2 .运行项目之后，会看到以下界面，恭喜你，项目环境搭建成功

正常。

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

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

4.搭建项目的首页

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

4.1 安装元素用户界面

$ cnpm i [emailprotected]建议固定某视频剪辑软件和元素用户界面的版本，避免将来版本升级后产生冲突

4.2 引入元素用户界面

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

从元素-ui '导入元素元素-用户界面/库/主题-默认/索引。CSS ' vue。使用(元素)4.3使用元素用户界面

将app.vue改为以下内容

模板div id='app '！-头部导航-header class=' header ' El-row El-col : span=' 24 ' El-菜单默认-活动=' 5 ' class=' El-菜单-演示'模式='水平' @ select=' El-菜单项索引=' 1 '高级插件/El-菜单项埃尔-菜单项索引='2 '在线商城/El-菜单项埃尔-菜单项索引='3 '客户管理/El-菜单项埃尔-菜单项索引='4 '系统设置/El-菜单项埃尔-菜单项索引='5 '活动发布/El-菜单项/El-菜单/El-列/El-行/标题div style=' position : relative；高度： 60px宽度： 100%;"/div main！-左侧导航-div class=' main-left ' El-menu default-active='/active public ' class=' El-menu-vertical-demo ' : router=' true ' El-menu-item index='/active public ' : class=' { ' is active ' : active } '活动发布/El-menu-item El-menu-item index='/activeManage ' : class=' { ' isaactive ' :活动的}"活动管理/El-菜单项/El-菜单/div！-右侧主内容区-div class=' main-right '/div/main/div/模板脚本从vue '导入某视频剪辑软件从元素-ui '导入元素-用户界面/库/主题-默认/索引。CSS ' Vue。使用(元素)导出默认{ name: 'app '，data : function(){ return { active : true } }/脚本样式正文{ margin:} # app {最小宽度： 1200 pxmargin : 0 autofont-family : ' Helvetica纽埃','方平' SC '，Arial，无衬线；} /* 头部导航*/header { z-index : 1000；最小宽度： 1200像素；过渡：全部0.5s轻松；边框-top:实心4px # 3091F2背景-color : # fff；box-shadow: 0 2px 4px 0 rgba(0，0，0，12)，0 0 6px 0 rgba(0，0，0，04);}标题。表头-固定{位置：固定；top : 0；左： 0；右： 0；}标题El-菜单-演示{填充-左侧： 300像素！重要；} /* 主内容区*/main { display :-web套件-box；显示器：-ms-flex盒；显示： flex最小高度： 800像素；border:固体40px # E9ECF1背景-颜色： # FCFCFC} main .main-left { text-align : center；宽度： 200像素；向左浮动：} main .main-right {-web kit-box-flex : 1；-ms-flex : 1；flex : 1；背景-color : # fff；padding: 50px 70px } main .el菜单{背景色：透明！重要；} /style4.4预览项目，看到如图所示页面，项目的首页就搭建好了

$ cnpm运行开发

在下一篇文章中，我将向您介绍使用vue.js2.0 ElementUI (2)开发后台管理系统的详细教程，敬请关注！

以上就是边肖介绍的用vue.js2.0 ElementUI开发后台管理系统的详细教程(一)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！