vue 后台模板

<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header>
      <nav class="navbar">
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/users">用户管理</router-link></li>
          <li><router-link to="/settings">设置</router-link></li>
        </ul>
      </nav>
    </header>

    <!-- 主要内容区域 -->
    <main>
      <router-view></router-view>
    </main>

    <!-- 底部版权信息 -->
    <footer>
      <p>&copy; 2023 Vue Admin Template</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style scoped>
/* 基本样式 */
body {
  font-family: Arial, sans-serif;
}

.navbar {
  background-color: #333;
  color: white;
  padding: 1rem;
}

.navbar ul {
  list-style-type: none;
  padding: 0;
}

.navbar li {
  display: inline;
  margin-right: 1rem;
}

.navbar a {
  color: white;
  text-decoration: none;
}

main {
  padding: 2rem;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>

解释说明：

1. 模板结构 (<template>):

   • 包含了一个基本的后台管理系统布局，分为顶部导航栏、主要内容区域和底部版权信息。
   • 使用了 router-link 组件来创建导航链接，方便在不同页面之间切换。

2. 脚本部分 (<script>):

   • 定义了一个名为 App 的 Vue 组件，作为整个应用的根组件。

3. 样式部分 (<style scoped>):

   • 提供了一些基本的样式，确保页面看起来整洁且功能正常。
   • 使用了 scoped 属性，使得这些样式仅应用于当前组件。

4. 路由视图 (<router-view>):

   • 这个标签用于显示匹配到的路由组件，即根据不同的路径显示不同的页面内容。