使用vue3和ts写一个后台管理系统

好的，下面是一个简单的示例：

首先，安装Vue CLI并创建项目：

npm install -g @vue/cli
vue create my-admin --default
cd my-admin

然后，安装Vue Router和Element Plus：

npm install vue-router@next
npm install element-plus

接着，创建一个路由文件`router.ts`：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Login from './views/Login.vue'
import Dashboard from './views/Dashboard.vue'
import UserList from './views/UserList.vue'

const routes: Array<RouteRecordRaw> = [
  { path: '/', component: Login },
  { path: '/dashboard', component: Dashboard },
  { path: '/users', component: UserList },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

然后，创建一个入口文件`main.ts`：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)

app.use(router)
app.use(ElementPlus)

app.mount('#app')

接着，创建一个登录页面`Login.vue`：

<template>
  <div class="login">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'

export default defineComponent({
  name: 'Login',
  components: { ElForm, ElFormItem, ElInput, ElButton },
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    }
  },
  methods: {
    submit() {
      (this.$refs.form as any).validate(valid => {
        if (valid) {
          this.$router.push('/dashboard')
        }
      })
    },
  },
})
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

然后，创建一个仪表板页面`Dashboard.vue`：

<template>
  <div class="dashboard">
    <h1>欢迎来到后台管理系统</h1>
    <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect">
      <el-menu-item index="/dashboard">仪表板</el-menu-item>
      <el-submenu index="users" v-if="isAuthenticated">
        <template #title>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/users">用户列表</el-menu-item>
      </el-submenu>
    </el-menu>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-plus'

export default defineComponent({
  name: 'Dashboard',
  components: { ElMenu, ElMenuItem, ElSubmenu },
  computed: {
    isAuthenticated() {
      // 在这里检查用户是否已经登录
      return true
    },
  },
  methods: {
    handleSelect(index: string) {
      this.$router.push(index)
    },
  },
})
</script>

<style>
.dashboard {
  width: 100%;
  height: 100%;
}
</style>

最后，创建一个用户列表页面`UserList.vue`：

<template>
  <div class="user-list">
    <h2>用户列表</h2>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="email" label="电子邮件"></el-table-column>
      <el-table-column prop="phone" label="电话号码"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'

export default defineComponent({
  name: 'UserList',
  components: { ElTable, ElTableColumn },
  data() {
    return {
      users: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', phone: '1234567890' },
        { id: 2, name: '李四', email: 'lisi@example.com', phone: '0987654321' },
        { id: 3, name: '王五', email: 'wangwu@example.com', phone: '1357924680' },
      ],
    }
  },
})
</script>

<style>
.user-list {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>

现在，你可以在终端中运行`npm run serve`启动开发服务器，并在浏览器中访问`http://localhost:8080`来查看你的后台管理系统。