# 页面模板参考 ## App.vue ```vue ``` ## main.ts ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' import App from './App.vue' import router from './router' const app = createApp(App) const pinia = createPinia() for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(pinia) app.use(router) app.use(ElementPlus) app.mount('#app') ``` ## Portal main.ts ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) const pinia = createPinia() app.use(pinia) app.use(router) app.mount('#app') ``` ## 路由配置 ```typescript import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw } from 'vue-router' import { useUserStore } from '../stores/user' const routes: RouteRecordRaw[] = [ { path: '/login', name: 'Login', component: () => import('../views/login/Login.vue'), }, { path: '/', component: () => import('../components/Layout.vue'), redirect: '/dashboard', meta: { requiresAuth: true }, children: [ { path: 'dashboard', name: 'Dashboard', component: () => import('../views/dashboard/Dashboard.vue'), meta: { title: '仪表盘' }, }, { path: 'system/user', name: 'UserManagement', component: () => import('../views/system/UserManagement.vue'), meta: { title: '用户管理' }, }, ], }, ] const router = createRouter({ history: createWebHistory(), routes, }) router.beforeEach((to, _from, next) => { const userStore = useUserStore() if (to.meta.requiresAuth && !userStore.isAuthenticated) { next('/login') } else { next() } }) export default router ``` ## 用户 Store ```typescript import { defineStore } from 'pinia' import { ref, computed } from 'vue' interface User { id: string username: string name: string avatar?: string roles: string[] } export const useUserStore = defineStore('user', () => { const user = ref(null) const token = ref('') const isAuthenticated = computed(() => !!token.value) const userName = computed(() => user.value?.name || '') const userRoles = computed(() => user.value?.roles || []) function login(username: string, password: string): boolean { if (username === 'rabi' && password === 'rabi001') { token.value = 'mock-token-' + Date.now() user.value = { id: '1', username: 'rabi', name: '管理员', roles: ['admin'], } return true } return false } function logout() { user.value = null token.value = '' } return { user, token, isAuthenticated, userName, userRoles, login, logout, } }) ``` ## 分页表格组件模式 ```vue ```

vue3-monorepo-builder

Install this skill

Comments