vue3+Element Plus+pinia路由

### 集成 Element Plus 和 Pinia 进行路由管理 #### 创建 Vue 3 项目 为了创建一个新的 Vue 3 项目，可以使用 `@vue/cli` 或者更现代的构建工具如 Vite。这里假设已经通过某种方式初始化了一个新的 Vue 3 项目。 ```bash npm create vite@latest my-vue-app --template vue-ts cd my-vue-app npm install ``` #### 安装必要的库 接下来，在项目根目录下执行命令来安装所需的依赖项： ```bash npm install element-plus pinia @pinia-plugin-persistedstate vue-router@next ``` #### 设置 Pinia Store 在项目的 `/src/stores/counter.ts` 文件中定义一个简单的状态存储模块： ```typescript // src/stores/counter.ts import { defineStore } from 'pinia' export const useCounterStore = defineStore('main', { state: () => ({ count: 0, }), actions: { increment() { this.count++ }, }, }) ``` 然后在主文件中注册这个 store: ```typescript // main.ts import { createApp, h } from 'vue' import App from './App.vue' import router from './router' // 假设已设置好路由器 import { createPinia } from 'pinia' import 'element-plus/dist/index.css' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app') ``` #### 使用 Vue Router 配置路由可以在 `/src/router/index.ts` 中完成如下所示： ```typescript // src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', name: 'home', component: HomeView, }, ] const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes, }) export default router ``` 对于视图组件中的 `<router-view>` 的运用，则是在模板里指定位置让匹配到的组件渲染出来，这使得页面之间的导航变得非常简单高效[^3]。 #### 整合 Element Plus UI 组件 最后一步是引入 Element Plus 并开始在其内嵌入任何想要使用的组件。比如在一个名为 `HomeView.vue` 的单文件组件中加入按钮控件： ```html <!-- src/views/HomeView.vue --> <template> <div class="home"> <el-button type="primary">Primary Button</el-button> </div> </template> <script lang="ts" setup> import { ElButton } from 'element-plus' </script> ``` 这样就完成了基本的集成工作，现在应该能够看到带有样式化的按钮显示在家页界面上了。