本文将带你通过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后台管理系统。尽管这个项目非常简洁，但可以作为进一步开发的基础。从这里，你可以继续添加更多功能，如用户管理、权限控制等，创建一个功能完备的后台管理系统。