使用vue和elementui写一个后台管理页面
时间: 2024-05-13 21:17:53 浏览: 11
好的,下面是一个简单的示例:
先安装 Vue 和 ElementUI:
```
npm install vue
npm install element-ui
```
然后在入口文件 `main.js` 中引入 Vue 和 ElementUI:
```js
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)
})
```
接着在 `App.vue` 组件中写页面布局和功能:
```html
<template>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
height: 100vh;
}
</style>
```
这里使用了 ElementUI 的布局组件 `el-container`、`el-header`、`el-aside`、`el-main` 和 `el-footer`。可以根据实际需求进行修改。
最后在 `index.html` 中添加一个容器元素:
```html
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
```
运行项目:
```
npm run dev
```
就可以看到一个简单的后台管理页面了。