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 继承详解(一)
Jul 13 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
vue实现底部菜单功能
Jul 24 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 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 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python脚本设置系统时间的两种方法
2016/02/21 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python pandas生成时间列表
2019/06/29 Python
python动态视频下载器的实现方法
2019/09/16 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
化学专业自荐信
2014/05/28 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
医院消毒隔离制度
2015/08/05 职场文书
微信早安问候语
2015/11/10 职场文书