基于Vue.js 2.x系列 + Element UI + RBAC/AUTH权限 的响应式后台管理系统

这是一个基于Vue.js 2.x和Element UI的响应式后台管理系统,集成了RBAC/AUTH权限管理。文章更新至2018年,增加了文件上传插件和mock数据功能,同时修复了导航栏收折问题。提供了安装步骤、本地开发和构建生产的指南,并有在线演示。
摘要由CSDN通过智能技术生成

前言


项目前端地址https://github.com/lmxdawn/vue-admin-html

项目后端地址https://github.com/lmxdawn/vue-admin-php

欢迎大家的star


20180519 更新

  •   1.增加文件上传插件,主要用于管理后台的资源,之前我们运营是每次都要去上传文件,而有了这个插件管理,就可以不用上传重复的资源。上传插件实现了把汉字自动转成拼音(都知道中文路径时不友好的)。现目前上传的文件没有用数据库来管理,而是直接用获取文件的形式,也是偷懒,有时间再实现吧。

20180428 更新

  •  1.增加 mock 模拟数据。注意(改为API接口数据时一定要把 main.js 里面引入的 mock.js 删掉)

  •  2.增加左侧导航栏的左右收折功能,特别注意一点就是 由于 element-ui 的导航菜单的原因,在el-submenu 外层加了 div 时,收折就隐藏不了文字,所以要自己加上 css 样式,放在 base.scss 下面
// 左侧导航栏的折叠后的样式
.slide-hide {
    .el-menu--collapse {
        .el-subme
  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以使用 Vue-cli 快速搭建基于 Vue.js 的项目结构并在此基础上添加 element-ui 和 three.js 的依赖库。以下是相关的命令: 1. 安装 Vue-cli ``` npm install -g @vue/cli ``` 2. 创建一个基于 Vue.js 的项目 ``` vue create your-project-name ``` 3. 进入项目目录并添加 element-ui 和 three.js 的依赖库 ``` cd your-project-name npm i element-ui three ``` 4. 在 main.js 中导入 element-ui 和 three.js 的样式和组件 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import * as THREE from 'three' import App from './App.vue' Vue.config.productionTip = false Vue.use(ElementUI) Vue.prototype.$THREE = THREE new Vue({ render: h => h(App), }).$mount('#app') ``` 5. 在 App.vue 中创建一个包含 three.js 场景的组件 ```vue <template> <div class="three-container"></div> </template> <script> export default { name: 'App', mounted () { // 初始化 three.js 场景 const scene = new this.$THREE.Scene() const camera = new this.$THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) const renderer = new this.$THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) document.querySelector('.three-container').appendChild(renderer.domElement) const geometry = new this.$THREE.BoxGeometry(1, 1, 1) const material = new this.$THREE.MeshBasicMaterial({ color: 0x00ff00 }) const cube = new this.$THREE.Mesh(geometry, material) scene.add(cube) camera.position.z = 5 const animate = () => { requestAnimationFrame(animate) cube.rotation.x += 0.01 cube.rotation.y += 0.01 renderer.render(scene, camera) } animate() } } </script> <style scoped> .three-container { width: 100%; height: 100%; position: fixed; } </style> ``` 这样就可以创建一个基于 Vue.jselement-ui 和 three.js 的后台管理系统模板。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值