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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 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伪静态页面函数附使用方法
2008/06/20 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Prototype Class对象学习
2009/07/19 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
小程序自动化测试的示例代码
2020/08/11 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
中英文求职信范文
2014/01/27 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2015年女职工工作总结
2015/05/15 职场文书
检讨书范文
2019/04/16 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书