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对象的property和prototype是这样一种关系
Mar 24 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
JavaScript判断数组类型的方法
Oct 23 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
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
JavaScript中常用的运算符小结
2012/01/18 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
JavaScript DOM基础
2015/04/13 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python探索之修改Python搜索路径
2017/10/25 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
nohup的用法
2012/11/26 面试题
校园餐饮创业计划书
2014/01/10 职场文书
户外婚礼策划方案
2014/02/08 职场文书
晚会主持词开场白
2014/03/17 职场文书
志愿者宣传口号
2014/06/17 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
承诺函格式模板
2015/01/21 职场文书