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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
Vue computed计算属性的使用方法
Jul 14 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
简单分析js中的this的原理
Aug 31 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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
编写PHP的安全策略
2006/10/09 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
javascript 验证日期的函数
2010/03/18 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python实时获取cmd的输出
2015/12/13 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Python内置异常类型全面汇总
2020/05/28 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
《将心比心》教学反思
2014/04/08 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
班级学习计划书
2014/04/27 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
英语求职信范文
2014/05/23 职场文书
学习计划是什么
2019/04/30 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
Python re.sub 反向引用的实现
2021/07/07 Python