Vue3+ElementPlus+pinia 小案例

1、初始化项目

使用脚手架快速创建Vue3应用：https://cli.vuejs.org/zh/

脚手架自动整合了vue-router路由、ts、前端工程化等库；

安装脚手架工具

npm install -g @vue/cli

检测安装是否成功

vue -V

创建项目：

vue create 项目名称

安装依赖

cd 项目名称
npm install
npm install element-plus
npm install pinia
npm vue-router

2、设置目录结构

3、配置Pinia

创建一个Pinia store来管理用户状态

// src/store/user.js
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({user: null,role: null,}),actions: {login(user, role) {this.user = user;this.role = role;},logout() {this.user = null;this.role = null;}}
});

4、配置路由

配置路由来处理页面跳转

// src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import Admin from './views/Admin.vue';
import User from './views/User.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';const routes = [{ path: '/', component: Home },{ path: '/admin', component: Admin },{ path: '/user', component: User },{ path: '/login', component: Login },{ path: '/register', component: Register }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

5、创建登录和注册组件

<!-- src/components/Login.vue -->
<template><el-form @submit.prevent="onLogin"><el-form-item label="用户名"><el-input v-model="username" /></el-form-item><el-form-item label="密码"><el-input type="password" v-model="password" /></el-form-item><el-button type="primary" @click="onLogin">登录</el-button></el-form>
</template><script>
import { useUserStore } from '../store/user';
import { useRouter } from 'vue-router';export default {setup() {const userStore = useUserStore();const router = useRouter();const username = ref('');const password = ref('');const onLogin = () => {// 假设角色是基于用户名决定的const role = username.value === 'admin' ? 'admin' : 'user';userStore.login(username.value, role);if (role === 'admin') {router.push('/admin');} else {router.push('/user');}};return {username,password,onLogin};}
};
</script>

<!-- src/components/Register.vue -->
<template><el-form @submit.prevent="onRegister"><el-form-item label="用户名"><el-input v-model="username" /></el-form-item><el-form-item label="密码"><el-input type="password" v-model="password" /></el-form-item><el-button type="primary" @click="onRegister">注册</el-button></el-form>
</template><script>
import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const username = ref('');const password = ref('');const onRegister = () => {// 注册逻辑router.push('/login');};return {username,password,onRegister};}
};
</script>

6、创建不同角色的页面

<!-- src/views/Admin.vue -->
<template><div><h1>Admin Page</h1></div>
</template>

<!-- src/views/User.vue -->
<template><div><h1>User Page</h1></div>
</template>

<!-- src/views/Home.vue -->
<template><div><h1>Home Page</h1></div>
</template>

7、配置主应用

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);
app.use(router);
app.use(createPinia());
app.use(ElementPlus);
app.mount('#app');

<!-- src/App.vue -->
<template><router-view></router-view>
</template><script>
export default {name: 'App'
};
</script>

<!-- src/App.vue -->
<template><router-view></router-view>
</template><script>
export default {name: 'App'
};
</script>```