一、环境准备
1. 安装Vue CLI
首先，确保你已经安装了Node.js和npm。然后使用以下命令安装Vue CLI：
npm install -g @vue/cli2. 创建Vue项目
使用Vue CLI创建一个新的Vue3项目：
vue create vue-admincd 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后台管理系统。尽管这个项目非常简洁，但可以作为进一步开发的基础。从这里，你可以继续添加更多功能，如用户管理、权限控制等，创建一个功能完备的后台管理系统。
