vite+vue3+pinia+vue-router@4+setup+ts+layOut

### 项目布局实现 以下是基于 Vite、Vue3、Pinia、Vue-Router@4、TypeScript 和 `setup` 语法构建项目的具体方法： #### 1. 初始化项目并安装依赖 通过 Vite 创建一个新的 Vue3 项目，并指定 TypeScript 支持： ```bash npm create vite@latest my-project --template vue-ts cd my-project ``` 随后，安装必要的依赖项，包括 Vue Router v4 和 Pinia： ```bash npm install vue-router@4 pinia element-plus axios ``` #### 2. 配置 Element Plus 的按需加载 为了优化打包体积，推荐使用插件来实现 Element Plus 的按需导入。可以安装 `unplugin-vue-components` 和 `unplugin-auto-import` 插件： ```bash npm install unplugin-vue-components unplugin-auto-import -D ``` 在 `vite.config.ts` 中配置这些插件： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }) ``` 这一步实现了 Element Plus 组件和 API 的自动导入[^1]。 #### 3. 设置路由管理器 创建 `src/router/index.ts` 文件以定义路由逻辑： ```typescript import { createRouter, createWebHistory } from 'vue-router'; import routes from './routes'; const router = createRouter({ history: createWebHistory(), routes, }); // 路由守卫：验证用户身份 router.beforeEach((to, from, next) => { const token = localStorage.getItem('token'); const isAuthenticated = !!token; if (to.name === 'login') { localStorage.clear(); } if (to.name !== 'login' && !isAuthenticated) { next({ name: 'login' }); } else { next(); } }); export default router; ``` 同时，在同一目录下创建 `routes.ts` 定义具体的路由映射表： ```typescript import { RouteRecordRaw } from 'vue-router'; const routes: Array<RouteRecordRaw> = [ { path: '/', component: () => import('@/views/Home.vue'), name: 'home' }, { path: '/login', component: () => import('@/views/Login.vue'), name: 'login' }, ]; export default routes; ``` #### 4. 整合状态管理工具 Pinia 初始化 Pinia 并将其挂载至应用实例中。编辑 `src/main.ts` 文件如下： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import pinia from './stores'; // 引入 Pinia 实例 import 'element-plus/dist/index.css'; const app = createApp(App); app.use(pinia); app.use(router); app.mount('#app'); ``` 接着，在 `src/stores/` 下创建存储模块文件（如 `userStore.ts`），用于管理全局状态： ```typescript import { defineStore } from 'pinia'; export const useUserStore = defineStore('user', { state: () => ({ username: '', isLoggedIn: false, }), actions: { login(username: string) { this.username = username; this.isLoggedIn = true; }, logout() { this.username = ''; this.isLoggedIn = false; }, }, }); ``` #### 5. 构建基础布局结构 修改 `src/App.vue` 来支持动态视图渲染以及顶部导航栏等功能： ```html <template> <div id="app"> <!-- 导航 --> <nav-bar /> <!-- 动态内容区域 --> <router-view></router-view> <!-- 底部版权信息 --> <footer-component /> </div> </template> <script setup lang="ts"> import NavBar from '@/components/NavBar.vue'; import FooterComponent from '@/components/Footer.vue'; </script> ``` #### 6. 在组件中使用路由与状态管理功能 假设有一个按钮点击事件触发跳转或者更新状态的操作，可以在任何组件内部这样写： ```typescript <script setup lang="ts"> import { useRouter, useRoute } from 'vue-router'; import { useUserStore } from '@/stores/userStore'; const userStore = useUserStore(); const router = useRouter(); function handleLoginClick() { userStore.login('John Doe'); // 更新 Pinia 状态 router.push('/dashboard'); // 执行页面跳转 } </script> ``` 以上即完成了整个基于 Vite、Vue3、Pinia、Vue-Router@4、TypeScript 及 Setup 语法的项目布局设计[^2]。 ---