基于vue的办公后台系统
时间: 2023-12-23 13:25:09 浏览: 29
基于Vue的办公后台系统可以使用Element UI组件库来快速构建页面。下面是一个简单的示例:
1.首先安装Vue和Element UI:
```shell
npm install vue
npm install element-ui
```
2.在src目录下新建view文件夹,用来存放页面。
3.在main.js中引入Vue和Element UI,并注册Element UI组件:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
render: h => h(App)
})
```
4.在App.vue中使用Element UI组件:
```html
<template>
<div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">用户管理</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(index) {
this.activeIndex = index
}
}
}
</script>
```
5.在router/index.js中配置路由:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/view/Home.vue'
import User from '@/view/User.vue'
import Order from '@/view/Order.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/user',
name: 'user',
component: User
},
{
path: '/order',
name: 'order',
component: Order
}
]
})
```
6.在view文件夹下新建Home.vue、User.vue和Order.vue组件,并在组件中编写页面代码。