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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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
重置版战役片段
2020/04/09 魔兽争霸
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
JS计算斐波拉切代码实例
2019/09/12 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python 从相对路径下import的方法
2018/12/04 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python urllib和urllib3知识点总结
2021/02/08 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
美国五金商店:Ace Hardware
2018/03/27 全球购物
作风建设演讲稿
2014/05/23 职场文书
见习报告格式范文
2014/11/08 职场文书
跑吧孩子观后感
2015/06/10 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
SQL SERVER触发器详解
2022/02/24 SQL Server