默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。

主要是以下工作：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

<script setup></script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped></style>

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')

6. 引入 Element Plus 组件库

6.1 按需引入 Element Plus

• pnpm add element-plus

• 官方文档：https://element-plus.org/zh-CN/guide/quickstart.html

• 默认 components 下的文件也会被 自动注册~

7. Pinia 构建仓库和持久化

官方文档：Home | pinia-plugin-persistedstate

① 安装插件 pinia-plugin-persistedstate  

• pnpm add pinia-plugin-persistedstate -D

② 使用 main.js

• import persist from 'pinia-plugin-persistedstate'
• app.use(createPinia().use(persist))

③ 配置 stores/user.js

• persist: true

8. Pinia - 配置仓库统一管理

• 初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

• 由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

stores/index.js：

main.js

• 使用一个仓库 import { useUserStore } from `./stores/user.js` 不同仓库路径不一致

• 由 stores/index.js 统一导出，导入路径统一 `./stores`，而且仓库维护在 stores/modules 中

9. 数据交互 - 请求工具设计

9.1 创建 axios 实例

使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

① 安装 axios

• pnpm add axios

② 新建 utils/request.js 封装 axios 模块

• 利用 axios.create 创建一个自定义的 axios 来使用
• axios中文文档|axios中文网 | axios

9.2 完成 axios 基本配置

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router/index.js'
const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址和超时时间
  baseURL,
  timeout: 100000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)
// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    // TODO 3. 处理业务失败
    ElMessage.error(res.data.message || '服务异常')

    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况 => 401 权限不足或 token 过期 => 拦截登录
    if (err.response && err.status === 401) {
      router.push('/login')
    }
    // 错误默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance

10. 首页整体路由设计

实现目标:

• 完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的.....】

• 通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口

• 我们需要搭建嵌套路由

目标：

• 把项目中所有用到的组件及路由表, 约定下来

明确了路由规则，可以全部配完，也可以边写边配。

import { createRouter, createWebHistory } from 'vue-router'
import LoginPage from '@/views/login/LoginPage.vue'
import LayoutContainer from '@/views/layout/LayoutContainer.vue'
import ArticleManage from '@/views/article/manage/ArticleManage.vue'
import ArticleChannel from '@/views/article/channel/ArticleChannel.vue'
import UserAvatar from '@/views/user/avatar/UserAvatar.vue'
import UserPassword from '@/views/user/password/UserPassword.vue'
import UserProfile from '@/views/user/profile/UserProfile.vue'
// createRouter 创建路由实例
// 配置 history 模式
//  1. history 模式：createWebHistory 地址栏不带 #
//  2. hash 模式：createWebHahsHistory 地址栏带 #

// vite 中的环境变量 import.meta.env.BASE_URL 就是vite.config.js 中的 base 配置对象
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: LoginPage
    },
    {
      path: '/',
      component: LayoutContainer,
      redirect: '/article/manage',
      children: [
        {
          path: 'article/manage',
          component: ArticleManage
        },
        {
          path: 'article/channel',
          component: ArticleChannel
        },
        {
          path: 'user/profile',
          component: UserProfile
        },
        {
          path: 'user/avatar',
          component: UserAvatar
        },
        {
          path: 'user/password',
          component: UserPassword
        }
      ]
    }
  ]
})

export default router