使用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 相关文章推荐
javascript 定义新对象方法
Feb 20 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
PHP 第一节 php简介
2012/04/28 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
原生js实现俄罗斯方块
2020/10/20 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
python实现小球弹跳效果
2019/05/10 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
Order by的几种用法
2013/06/16 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
《月迹》教学反思
2014/02/19 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python