pinia：pinia.vuejs.org/zh/getting-…
pinia-plugin-persistedstate： prazdevs.github.io/pinia-plugi…
初始化husky工具配置：typicode.github.io/husky/
环境变量地址：cn.vitejs.dev/guide/env-a…
Element Plus组件库-强大的组件（要常用）：element-plus.org/zh-CN/guide…
vue3的函数插件（例如计算页面滚动距离）：vueuse.org/
富文本编辑器：vueup.github.io/vue-quill/
pnpm add @vueup/vue-quill@latest安装
powershell vue3创建完脚手架后，“code ./” 用vscode打开项目

根据配置，启动项目执行：npm run dev

"mock"文件夹：前端模拟假数据接口（后端进度跟不上情况下）

1.Vue3创建脚手架项目

项目根目录右键启动powershell

vue2插件：Vetur(用vue3时需要禁用)
vue3插件：volar

2. 组合式API

2.1 setup选项

2.2 reactive和ref函数

2.3 computed

2.4 watch监视

方法里使用 ref对象，加“.value”
watch监视 ref对象，不加“.value”
template 内使用ref对象的数据，不加“.value”

immediate和deep:true

2.5 生命周期函数

2.6 父子通信

2.7 模版引用，defineExpose()

2.8 provide和inject

2.9 Vue新特性-defineOptions

2.10 Vue新特性-defineModel

3. Pinia

发请求要安装axios: npm add axios

4 项目-大事件管理系统

4.1 大事件项目介绍和创建

创建项目不要在根级别（盘）建项目（会报错：权限不够），而是要在文件夹里建项目

4.2 Eslint配置代码风格

4.3 配置代码检查工作流

4.4 目录调整

4.5 vue-router4路由代码解析

常用地址栏跳转不带“#”的createWebHistory

方法中使用路由对象跳转：router.push(); template模板中使用路由对象跳转：$router.push()

配路由基地址

4.6 引入 Element Plus 组件库

pnpm install element-plus

element ui这个框架。可以不用导入组件，直接在页面使用

4.7 Pinia构建仓库和持久化

共享数据

构建用户仓库后数据持久化

4.8 pinia仓库统一管理

4.9 数据交互 - 请求工具设计

import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import { router } from 'vue-router'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  //   ----------一般不会出错，只要baseURL对----------
  baseURL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    // ----------一般不会出错！ 要是出错：看请求头的有没有Authorization => useUserStore仓库数据是否出错----------
    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. 处理业务失败,给错误提示，抛出错误
    // 利用element-plus组件提示效果
    //   ----------只要有弹框就不会出错----------
    ElMessage.error(res.data.mess)
    return Promise.reject(res.data.message || '服务器异常')
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况 => 401 权限不足 或 token过期 => 拦截到登录
    // status状态码
    if (err.response?.status === 401) {
      router.push('/login')
    }

    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务器异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }