官方脚手架 “create-vue” 脚手架创建 Vue 3 项目

红油曲奇

已于 2023-02-25 17:22:50 修改

阅读量218

点赞数

分类专栏： Web 学习文章标签： vue.js

于 2023-02-23 21:49:35 首次发布

本文链接：https://blog.csdn.net/qq_45830969/article/details/129188448

版权

Web 学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3项目中使用Pinia进行状态管理，结合VueRouter和TypeScript增强路由功能。推荐了ElementPlus组件库和IconPark图标库，以及axios作为网络请求库，并详细展示了axios的拦截器配置。此外，还提到了VueDevtools浏览器插件和Pinia的持久化存储插件pinia-plugin-persist。

摘要由CSDN通过智能技术生成

查看官方文档

1、选择功能（创建时选择）

TypeScript
Vue Router
Pinia

《Pinia官方文档》

推荐博主文章：

《Pinia详细使用步骤（0基础）》
《新一代状态管理工具 – Pinia 上手指南》

ESLint
Prettier

2、选择VSCode插件

Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)
Vue VSCode Snippets
ESLint

3、选择组件库

4、选择图标库

5、选择字体

自用：iconfont字体库

如何引入

6、选择网络请求库

推荐 axios

如何安装
拦截器封装（/src/http/index.ts）：

/**
 * 封装axios配置
 * 包括axios实例化、拦截器、登录跳转、消息提示和错误处理
 */

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

// 枚举返回结果
enum msg{
  "校验通过" = 200,
  "请求异常" = 400,
  "登录超时" = 401,
  "密码错误" = 403,
  "账号错误" = 404,
  "服务器异常" = 500
}

/**
 * 创建axios实例 + 基础配置
 */
const instance = axios.create({
  baseURL: 'http://127.0.0.1:4523/m1/2301781-0-default',
  timeout: 2000,
  headers: {
    "Content-Type": "application/json; charset=utf-8"
  }
})

/**
 * 请求拦截器
 */
instance.interceptors.request.use(config=>{
  config.headers = config.headers || {};

  // 添加token到请求头
  config.headers.token = localStorage.getItem('token') || ''

  console.log('请求参数：', config);
  return config;
}, error => {
  console.log('请求错误：', error);
  return Promise.reject(error)
})

/**
 * 响应拦截器
 */
instance.interceptors.response.use(res=>{
  const code:number = res.data.code;

  if (code != 200) {
    // 消息提示
    ElMessage({
      showClose: true,
      message: msg[code],
      type: 'error',
      center: true
    })
    
    // 登录过期：重置token，重定向至登录页
    if (code == 401) {
      localStorage.setItem('token', '');
      router.push("/login")
    }
    return Promise.reject(res);
  }

  // 将token存储起来
  if (res.data.data.token) {
    localStorage.setItem('token', JSON.stringify(res.data.data.token));
  }

  console.log('响应结果：', res);
  return res;
}, error=>{
  console.log('响应错误：', error);
  return Promise.reject(error);
})

// 导出实例
export default instance

接口请求定义（/src/http/api.ts）

/**
 * 接口请求集合
 */

import instance from ".";

interface loginData {
  identity: string,
  userId: string,
  password: string
}

export const login = (data: loginData) => instance({
  url: "/loginVerify",
  method: "post",
  data
})