本文将带你通过10分钟快速了解和创建一个简单的Vue3后台管理系统。通过本教程，你将掌握Vue3的基本用法，并学会如何搭建一个管理系统的基本框架。

一、环境准备

1. 安装Vue CLI

首先，确保你已经安装了Node.js和npm。然后使用以下命令安装Vue CLI：

npm install -g @vue/cli

2. 创建Vue项目

使用Vue CLI创建一个新的Vue3项目：

vue create vue-admin
cd vue-admin

在选择配置时，选择Vue 3和TypeScript（也可以根据需要选择JavaScript）。

二、项目结构

项目结构如下：

vue-admin
├── public
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── views
│   ├── App.vue
│   └── main.ts
├── package.json
└── ...

三、安装依赖

安装一些常用的第三方库，如Vue Router、Vuex和Element Plus（一个基于Vue 3的UI库）：

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

四、配置路由

在src目录下创建一个名为router的文件夹，并在其中创建index.ts文件：

src/router/index.ts：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';

const routes = [
  { path: '/', component: Home, meta: { requiresAuth: true } },
  { path: '/login', component: Login },
];

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

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('auth') === 'true';
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

export default router;

五、创建Vuex状态管理

在src目录下创建一个名为store的文件夹，并在其中创建index.ts文件：

src/store/index.ts：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    user: null,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
  },
  actions: {
    login({ commit }, user) {
      localStorage.setItem('auth', 'true');
      commit('setUser', user);
    },
    logout({ commit }) {
      localStorage.setItem('auth', 'false');
      commit('setUser', null);
    },
  },
  getters: {
    isAuthenticated: state => !!state.user,
  },
});

export default store;

六、配置Element Plus

在src目录下的main.ts文件中配置Element Plus：

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

const app = createApp(App);
app.use(router);
app.use(store);
app.use(ElementPlus);
app.mount('#app');

七、创建视图

1. Home.vue

在src/views目录下创建一个名为Home.vue的文件：

<template>
  <div class="home">
    <el-header>Vue Admin</el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="'1'" class="el-menu-vertical-demo">
          <el-menu-item index="1"><i class="el-icon-menu"></i><span>Dashboard</span></el-menu-item>
          <el-menu-item index="2"><i class="el-icon-setting"></i><span>Settings</span></el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <h1>Welcome to Vue Admin</h1>
      </el-main>
    </el-container>
  </div>
</template>

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

<style scoped>
.home {
  height: 100%;
}
</style>

2. Login.vue

在src/views目录下创建一个名为Login.vue的文件：

<template>
  <div class="login">
    <el-form :model="loginForm" @submit.native.prevent="onSubmit">
      <el-form-item label="Username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Login</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
    };
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    
    const onSubmit = () => {
      store.dispatch('login', {
        username: this.loginForm.username,
        password: this.loginForm.password,
      });
      router.push('/');
    };

    return { onSubmit };
  },
};
</script>

<style scoped>
.login {
  max-width: 300px;
  margin: 0 auto;
  padding: 50px;
}
</style>

八、配置根组件

在src/App.vue中设置路由视图：

<template>
  <router-view></router-view>
</template>

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

九、运行项目

一切配置完毕后，启动项目：

npm run serve

十、总结

通过以上步骤，你已经成功创建了一个简单的Vue3后台管理系统。尽管这个项目非常简洁，但可以作为进一步开发的基础。从这里，你可以继续添加更多功能，如用户管理、权限控制等，创建一个功能完备的后台管理系统。