快速搭建vue3+element-plus+pinia+持久化脚手架

1.创建vue3项目

pnpm create vue

1-1.安装依赖并启动项目

cd qing-vue3
pnpm install
pnpm dev

1-2.安装sass

pnpm add sass -D

2.安装 element-plus

直达element-plus官方安装教程

2-1. 安装

pnpm install element-plus

2-2. 自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

2-3. 自动导入配置

/**
 * 因为设置了Element plus的自动导入,从而scr/components目录中的组件都会自动导入
 * 具体设置参考Element plus官网
 * 本项目中使用到 scr/components 中的组件就没有手动导入咯
 */

// 在 vite.config.js 文件中进行设置
import { defineConfig } from 'vite'
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: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2-4.安装element-plus图标

pnpm install @element-plus/icons-vue

3.整理pinia

3-1.在src/stores目录下新建文件夹modules和新建文件index.js

3-2 安装pinia持久化插件

pinia-plugin-persistedstate官方教程直达

pnpm i pinia-plugin-persistedstate

3-3. 修改 src/stores/index.js 内容,顺便配置了pinia持久化插件

/**
 * pinia分离模块,这里将统一导出stores中所有模块
 */
import { createPinia } from 'pinia'
// pinia 持久化方案
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

// import { useUserStore } from './user'
// export { useUserStore }
//  ↓↓ 等价下面的写法
export * from './modules/counter'

3-4.以后模块文件都放到 src/stores/modules/ 里，在index.js最后一行导入即可

3-5. 修改main.js内容

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores/index' // 新增:统一将stores内容从index导出
import 'element-plus/dist/index.css' // 新增:引入element-plus css

/**
 * 因为设置了Element plus的自动导入,从而scr/components目录中的组件都会自动导入
 * 具体设置参考Element plus官网
 * 本项目中使用到 scr/components 中的组件就没有手动导入咯
 */

const app = createApp(App)
app.use(pinia)		// 新增
app.use(router)
app.mount('#app')

数据交互 - 请求工具设计

1. 创建 axios 实例

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

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

1. 安装 axios

   pnpm add axios
   

2. 新建 utils/request.js 封装 axios 模块
   利用 axios.create 创建一个自定义的 axios 来使用
   axios官网直达

import axios from 'axios'

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

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
})

instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    return res
  },
  (err) => {
    // TODO 5. 处理401错误
    return Promise.reject(err)
  }
)

export default instance

2. 完成 axios 基本配置

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

const baseURL = 'http://localhost:8080'

const instance = axios.create({
  baseURL,
  timeout: 100000
})

instance.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    if (res.data.code === 0) {
      return res
    }
    ElMessage({ message: res.data.message || '服务异常', type: 'error' })
    return Promise.reject(res.data)
  },
  (err) => {
    ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
    console.log(err)
    if (err.response?.status === 401) {
      router.push('/login')
    }
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }