好的，以下是基于
Vue.js和Element-UI的后台管理界面
快速搭建步骤：
1. 创建
一个新的
Vue.js项目
```bash
vue create my-project
```
2. 安装Element-UI
```bash
npm i element-ui -S
```
3. 在main.js中引入Element-UI并注册组件
```
javascript
import
Vue from '
vue'
import App from './App.
vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
new
Vue({
render: h => h(App),
}).$mount('#app')
```
4. 创建
一个后台管理页面组件
```
javascript
<template>
<div class="admin">
<el-menu :default-active="$route.path" class="el-menu-
vertical-demo" @select="handleSelect">
<el-menu-item index="/dashboard">
<i class="el-icon-menu"></i>
<span slot="title">Dashboard</span>
</el-menu-item>
<el-submenu index="/system">
<template slot="title">
<i class="el-icon-setting"></i>
<span>System</span>
</template>
<el-menu-item index="/system/user">User</el-menu-item>
<el-menu-item index="/system/role">Role</el-menu-item>
</el-submenu>
</el-menu>
<div class="admin-container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'Admin',
methods: {
handleSelect(key, path) {
this.$router.push({ path })
}
}
}
</script>
<style>
.admin {
display: flex;
height: 100%;
}
.el-menu-
vertical-demo {
width: 200px;
height: 100%;
position: fixed;
}
.admin-container {
margin-left: 200px;
padding: 20px;
height: 100%;
width: calc(100% - 200px);
o
verflow: auto;
}
</style>
```
5. 创建
一个Dashboard页面组件
```
javascript
<template>
<div class="dashboard">
<h1>Dashboard</h1>
</div>
</template>
<script>
export default {
name: 'Dashboard'
}
</script>
<style>
.dashboard {
height: 100%;
}
</style>
```
6. 创建
一个用户管理页面组件
```
javascript
<template>
<div class="user">
<h1>User</h1>
</div>
</template>
<script>
export default {
name: 'User'
}
</script>
<style>
.user {
height: 100%;
}
</style>
```
7. 创建
一个角色管理页面组件
```
javascript
<template>
<div class="role">
<h1>Role</h1>
</div>
</template>
<script>
export default {
name: 'Role'
}
</script>
<style>
.role {
height: 100%;
}
</style>
```
8. 配置路由
```
javascript
import
Vue from '
vue'
import Router from '
vue-router'
import Admin from './views/Admin.
vue'
import Dashboard from './views/Dashboard.
vue'
import User from './views/User.
vue'
import Role from './views/Role.
vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
redirect: '/dashboard'
},
{
path: '/dashboard',
component: Admin,
children: [
{
path: '',
component: Dashboard
},
{
path: '/system/user',
component: User
},
{
path: '/system/role',
component: Role
}
]
}
]
})
```
9. 运行
项目
```bash
npm run serve
```
以上就是
快速搭建一个基于
Vue.js和Element-UI的后台管理界面的步骤，希望对你有所帮助。
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
