使用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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
原生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
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python类的继承用法示例
2019/01/31 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Python列表操作方法详解
2020/02/09 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
快速创建python 虚拟环境
2020/11/28 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
师恩难忘教学反思
2014/04/27 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js