使用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 相关文章推荐
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 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
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
javascript的console.log()用法小结
2012/05/31 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
python如何使用腾讯云发送短信
2020/09/17 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
巴西购物网站:Submarino
2020/01/19 全球购物
求职自荐信格式
2013/12/04 职场文书
服务之星获奖感言
2014/01/21 职场文书
摄影展策划方案
2014/06/02 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
人口与计划生育责任书
2015/05/09 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
乔迁新居祝福语
2019/11/04 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript