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 判断代码全收集
Apr 28 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
js实现表格字段排序
Feb 19 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 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+mysqli批量查询多张表数据的方法
2015/01/29 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
wxPython 入门教程
2008/10/07 Python
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python实现简单的代理服务器
2015/07/25 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python 定义只读属性的实现方式
2020/03/05 Python
为什么说python适合写爬虫
2020/06/11 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
战略合作意向书范本
2014/04/01 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
建党伟业观后感
2015/06/01 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python