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


Posted in Javascript onJanuary 21, 2017

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. 运行项目之后,会看到以下界面,恭喜你,项目环境搭建成功

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

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

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

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

4. 搭建项目的首页

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

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

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改为以下内容

<template>
  <div id="app">
  <!-- 头部导航 -->
  <header class="header">
  <el-row>
   <el-col :span="24">
    <el-menu default-active="5" class="el-menu-demo" mode="horizontal" @select="">
    <el-menu-item index="1">高级插件</el-menu-item>
    <el-menu-item index="2">在线商城</el-menu-item>
    <el-menu-item index="3">客户管理</el-menu-item>
    <el-menu-item index="4">系统设置</el-menu-item>
    <el-menu-item index="5">活动发布</el-menu-item>
    </el-menu>
   </el-col>
  </el-row>
  </header>
  <div style="position: relative;height: 60px;width: 100%;"></div>
  <main>
    <!-- 左侧导航 -->
   <div class="main-left">
    <el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">
    <el-menu-item index="/activePublic" :class="{'isActive': active}">活动发布</el-menu-item>
    <el-menu-item index="/activeManage" :class="{'isActive': !active}">活动管理</el-menu-item>
    </el-menu>
   </div>
    <!-- 右侧主内容区 -->
    <div class="main-right" >
    </div>
  </main>
  </div>
 </template>
 <script>
 import Vue from 'vue'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 Vue.use(Element)
 export default {
  name: 'app',
  data: function (){
  return {
   active:true
  }
  }
 }
 </script>
 <style>
  body{margin: 0;}
 #app {
  min-width: 1200px;
  margin: 0 auto;
  font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
 }
 /* 头部导航 */
 header{z-index: 1000;min-width: 1200px;transition: all 0.5s ease; border-top: solid 4px #3091F2; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04); }
 header.header-fixed{position: fixed;top: 0;left: 0;right: 0;}
 header .el-menu-demo{padding-left: 300px!important;}
 /* 主内容区 */
  main{ display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 800px; border: solid 40px #E9ECF1; background-color: #FCFCFC; }
  main .main-left{text-align: center;width: 200px;float: left;}
  main .main-right{-webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #fff; padding: 50px 70px; }
  main .el-menu{background-color: transparent!important;}
 </style>

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

$ cnpm run dev

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

在下篇文章小编给大家介绍使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二),敬请关注!

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

Javascript 相关文章推荐
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
js中this用法实例详解
May 05 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
Node.js Express安装与使用教程
May 11 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
原生js实现可拖动的登录框效果
Jan 21 #Javascript
微信小程序 WebSocket详解及应用
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 #Javascript
遍历json获得数据的几种方法小结
Jan 21 #Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 #Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 #Javascript
微信小程序 devtool隐藏的秘密
Jan 21 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php变量作用域的深入解析
2013/06/03 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Python端口扫描简单程序
2016/11/10 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Python中Selenium模块的使用详解
2020/10/09 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
房屋改造计划书
2014/01/10 职场文书
自主实习接收函
2014/01/13 职场文书
文秘人员工作职责
2014/01/31 职场文书
少先队入队活动方案
2014/02/08 职场文书
2015国庆节感想
2015/08/04 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
java实现面板之间切换功能
2022/06/10 Java/Android
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android