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 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
video.js添加自定义组件的方法
Dec 09 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
2021年最新CPU天梯图
2021/03/04 数码科技
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
详解Python pygame安装过程笔记
2017/06/05 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
自我鉴定注意事项
2014/01/19 职场文书
综合实践活动总结
2014/05/05 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
人事任命通知
2015/04/20 职场文书