编写一个vue的后端首页,并展示代码
时间: 2024-05-03 09:21:22 浏览: 14
很抱歉,作为AI语言模型,我无法编写代码。但是,我可以告诉您一个Vue后台管理系统的示例页面代码,您可以参考一下:
```html
<template>
<div class="dashboard">
<div class="sidebar">
<ul>
<li>
<router-link to="/dashboard">Dashboard</router-link>
</li>
<li>
<router-link to="/users">Users</router-link>
</li>
<li>
<router-link to="/products">Products</router-link>
</li>
<li>
<router-link to="/orders">Orders</router-link>
</li>
</ul>
</div>
<div class="main">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'Dashboard',
}
</script>
<style scoped>
.dashboard {
display: flex;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #f5f5f5;
padding: 10px;
}
.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar li {
margin-bottom: 10px;
}
.sidebar a {
color: #333;
text-decoration: none;
}
.sidebar a:hover {
color: #888;
}
.main {
flex: 1;
padding: 10px;
}
</style>
```
这是一个简单的Vue后台管理系统的主页示例,包括了侧边栏和主内容区域。您可以通过路由来切换不同的页面内容。