美国有git：https://github.com/search?q=vue-element-admin
中国有码云：https://gitee.com/search?utf8=%E2%9C%93&q=+vue-element-admin&type=
不搜不知道，一搜吓一跳！经常百度很重要。
感触：
如果你遇到一个前后端完全分离的项目，而且这个项目对美观相求不高，那么你可以参考这个。
vue 就是vue.js框架，element就是elemetnUI框架，admin就是前端有控制菜单显示隐藏的权限（当然后端对api权限控制也是必须的）。
用vscode开发，你会发现开发效率和生态的的好处！
你会发现不用前端框架，你将落后于这个时代。
如果你项目对美观要求高，可以用这个框架里的很多工具和思想，只是为了美观，不用element而是美工（html+css）
如果你想控制按钮的显示和隐藏，你可看看这篇文字：
https://www.cnblogs.com/hao-1234-1234/p/9850910.html
我的思路：在登录成功后，就将用户所有页面和按钮显示权限返回到前端对象，在点击菜单时从对象中查询对比；
---------------------------------------------------------------------------------------------------------------------
转载来源：https://blog.csdn.net/qq_28008615/article/details/81095861
最近公司要坐后台系统–原本一直用react，但技术大大决定要用vue，所以就用了这个框架，讲讲我的这个框架的理解吧，帮助新手可以快速上手
官方文档：https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md
git下载
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 安装依赖
npm install
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
# 我个人用的yarn
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
打开界面
看本地代码还有我自己对代码的解释
我们现在打开src/router/index.js 搜索admin
{
path: ‘/permission‘,
component: Layout,
redirect: ‘/permission/index‘,
alwaysShow: true, // will always show the root menu
meta: {
title: ‘permission‘,
icon: ‘lock‘,
roles: [‘admin‘, ‘editor‘] // 这里就是权限啦，
},
children: [{
path: ‘page‘,
component: () => import(‘@/views/permission/page‘),
name: ‘pagePermission‘,
meta: {
title: ‘pagePermission‘,
roles: [‘admin‘] // 这里只能admin访问的到
}
}, {
path: ‘directive‘,
component: () => import(‘@/views/permission/directive‘),
name: ‘directivePermission‘,
meta: {
title: ‘directivePermission‘
// if do not set roles, means: this page does not require permission
}
}]
},
上面就是在菜单里面控制权限了。
那在页面我们怎么控制权限呢？？
打开src/views/dashboard/index.vue
<template>
<div class="dashboard-container">
<!-- {{console.log(‘343434‘)}} -->
<!-- {{this.data |json}} -->
//切换组件
<component :is="currentRole"></component>
</div>
</template>
<script>
import { mapGetters } from ‘vuex‘
import adminDashboard from ‘./admin‘
import editorDashboard from ‘./editor‘
export default {
name: ‘dashboard‘,
components: { adminDashboard, editorDashboard },
data() {
return {
currentRole: ‘adminDashboard‘
}
},
computed: {
...mapGetters([
‘roles‘ //这里是从vuex里面获取roles,权限是存在vuex里面的，之后就会介绍
])
},
created() {
console.log(this.roles)
if (!this.roles.includes(‘admin‘)) {//如果roles不是admin，刚currentRole 赋值，那么我们的组件会发生变化
this.currentRole = ‘editorDashboard‘
}
}
}
</script>
打开src/mock/transaction.js
import Mock from ‘mockjs‘
const List = []
const count = 20
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
date: +Mock.Random.date(‘yyyy-MM-dd‘),
order_no: ‘@guid()‘,
timestamp: +Mock.Random.date(‘T‘),
username: ‘@name()‘,
price: ‘@float(1000, 15000, 0, 2)‘,
‘status|1‘: [‘success‘, ‘pending‘]
}))
}
export default {
getList: () => {
return {
total: List.length,
items: List
}
}
}
这里便是mock了一个transaction交易的数据
打开src/mock/index.js
import Mock from ‘mockjs‘
import loginAPI from ‘./login‘
import articleAPI from ‘./article‘
import remoteSearchAPI from ‘./remoteSearch‘
import transactionAPI from ‘./transaction‘
import wanziAPI from ‘./wanzi‘
// Mock.setup({
// timeout: ‘350-600‘
// })
// 登录相关
Mock.mock(/\/login\/login/, ‘post‘, loginAPI.loginByUsername)
Mock.mock(/\/login\/logout/, ‘post‘, loginAPI.logout)
Mock.mock(/\/user\/info\.*/, ‘get‘, loginAPI.getUserInfo)
// 文章相关
Mock.mock(/\/article\/list/, ‘get‘, articleAPI.getList)
Mock.mock(/\/article\/detail/, ‘get‘, articleAPI.getArticle)
Mock.mock(/\/article\/pv/, ‘get‘, articleAPI.getPv)
Mock.mock(/\/article\/create/, ‘post‘, articleAPI.createArticle)
Mock.mock(/\/article\/update/, ‘post‘, articleAPI.updateArticle)
// 搜索相关
Mock.mock(/\/search\/user/, ‘get‘, remoteSearchAPI.searchUser)
// 账单相关
Mock.mock(/\/transaction\/list/, ‘get‘, transactionAPI.getList)
// 丸子
Mock.mock(/\/wanzi\/list/, ‘get‘, wanziAPI.getList)
export default Mock
这里记得要拦截哦~~
=》vue-element-admin 框架应用2
原文：https://www.cnblogs.com/hao-1234-1234/p/11011559.html