vue 搭建后台系统模块化开发详解


Posted in Javascript onMay 01, 2019

本文主要介绍了vue 搭建后台系统模块化开发,分享给大家,具体如下:

效果

vue 搭建后台系统模块化开发详解

目录结构

├── README.md
├── build
│  ├── build.js
│  ├── check-versions.js
│  ├── logo.png
│  ├── utils.js
│  ├── vue-loader.conf.js
│  ├── webpack.base.conf.js
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── config
│  ├── dev.env.js
│  ├── index.js
│  └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│  ├── App.vue
│  ├── assets
│  │  └── logo.png
│  ├── components
│  │  ├── HelloWorld.vue
│  │  ├── header.vue
│  │  ├── home.vue
│  │  └── leftBanner.vue
│  ├── main.js
│  ├── router
│  │  └── index.js
│  └── views
│    ├── active.vue
│    ├── listOrder.vue
│    ├── newOrder.vue
│    ├── system.vue
│    └── user.vue
└── static

实现方法:

第一步:使用vue-cli 脚手架初始化项目文件,具体步骤参考

第二步:封装头部、侧边栏和公共容器组件

头部:用户信息等

侧边栏:用的elment-ui 的导航栏

公共容器:使用router-view 引入其他子页面,达到所有页面公用头部和侧边栏的效果

<template>
 <div>
  <el-container>
   <el-header>
    <temHeader></temHeader>
   </el-header>
   <el-container>
    <el-aside>
     <temLeftBanner></temLeftBanner>
    </el-aside>
    <el-main >
     <transition name="move" mode="out-in">
      <router-view class="main-container"></router-view>
     </transition>
    </el-main>
   </el-container>
  </el-container>
 </div>
</template>

<script>
import temHeader from './header.vue'
import temLeftBanner from './leftBanner.vue'
export default {
 data () {
  return {

  }
 },
 components: { // 组件
  temHeader,
  temLeftBanner
 },
 computed: { // 计算

 },
 methods: { // 方法事件

 },
 mounted () { // 加载完成

 },
 created () { // 创建

 }
}
</script>

<style lang='less'>
.el-container{
 height: 100vh;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
 background-color: #D3DCE6;
 color: #333;
 text-align: center;
 line-height: 200px;
}
.el-main {
 background-color: #E9EEF3;
 color: #333;
 text-align: center;
}
.main-container{
 max-width: 800px;
 margin: 0 auto;
}
body > .el-container {
 margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
 line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
 line-height: 320px;
}
</style>

第三步:内容页面

│  └── views
│    ├── active.vue
│    ├── listOrder.vue
│    ├── newOrder.vue
│    ├── system.vue
│    └── user.vue

第四步:路由

使用children来区分路由地址

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import listOrder from '@/views/listOrder'
import newOrder from '@/views/newOrder'
import active from '@/views/active'
import system from '@/views/system'
import user from '@/views/user'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   redirect: '/listOrder'
  },
  {
   path: '/',
   name: 'home',
   component: home,
   children: [
    {
     path: '/listOrder',
     name: 'listOrder',
     component: listOrder
    },
    {
     path: '/newOrder',
     name: 'newOrder',
     component: newOrder
    },
    {
     path: '/active',
     name: 'active',
     component: active
    },
    {
     path: '/system',
     name: 'system',
     component: system
    },
    {
     path: '/user',
     name: 'user',
     component: user
    }
   ]
  }]
})

项目地址:https://github.com/Aimee1608/vueCommonModule

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 #Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 #Javascript
3分钟了解vue数据劫持的原理实现
May 01 #Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 #Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 #Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 #Javascript
Vue.extend实现挂载到实例上的方法
May 01 #Javascript
You might like
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python获取文件ssdeep值的方法
2014/10/05 Python
Python中类的初始化特殊方法
2017/12/01 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
护士自我评价
2014/02/01 职场文书
单位委托书格式范本
2014/09/29 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
个园导游词
2015/02/04 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
2015年度物流工作总结
2015/04/30 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby