(error) => {return Promise.reject(error)})exportdefault instance在组件中使用 axiosimport request from '@/utils/request'exportdefault {async created() {const data = await request.get('/user')console.log(data)},}五、封装通用组件
通过以上步骤,我们成功搭建了一个基于 Vue3 + Vite + Pinia + Router + Axios 的项目,并封装了通用的 Button 组件。在实际开发中,我们可以根据需求继续封装更多的通用组件,例如 Modal、Table 等,以提高开发效率和代码复用性。
一、安装axios 1 npm i axios 二、文件结构 涉及到的文件: utils/request.sj api/index.js(可以根据不同页面在api文件下新建不同文件夹,方便管理) vite.config.js 三、request.js 对axios进行简单的二次封装 import axios from "axios"; const request=axios.create({//此处的 '/api' 和 vite.config.js ...
2.1.先安装依赖 npm install @types/node --save-dev 2.2.vite.config.ts 配置文件,添加以下配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path'; // 编辑器提示 path 模块找不到,可以cnpm i @types/node --dev 即可 // https://vite...
meta.env.VITE_API_DOMAIN; //http request 拦截器 axios.interceptors.request.use( config => { // 配置请求头 config.headers = { //'Content-Type':'application/x-www-form-urlencoded', // 传参方式表单 'Content-Type':'application/json;charset=UTF-8', // 传参方式json 'token':'80c483d59...
简单的vite vue axios配置 ts 技术栈 Vue 3.x Typescript Vite 2.x Pinia Vue-Router 4.x Element-plus UI And More… 初始化项目 npm init vite@latest 项目名 或 yarn create vite 项目名 1. 2. 3. 选择自己需要的框架和语言(博主选择的是Vue+TS)...
项目封装axios、vite使用env环境变量主要是统一代码规范,便于开发且后续好维护。 💖 编码sliod原则 SOLID 原则是一种设计原则,用于指导编写可维护、可扩展、易于理解和可复用的代码。 单一职责原则 (Single Responsibility Principle, SRP): 一个类或模块只负责一项职责,降低耦合度。
在Vue 3 项目中使用 Vite 封装 Axios 是一个常见的需求,它可以帮助你更好地管理和复用 HTTP 请求。以下是一个详细的步骤指南,教你如何在 Vue 3 + Vite 项目中封装 Axios。 1. 安装 Axios 首先,你需要在项目中安装 Axios。打开终端,在项目根目录下运行以下命令: bash npm install axios 2. 创建 Axios 实...
// axios中请求配置有baseURL选项,表示请求URL公共部分 baseURL: import.meta.env.VITE_APP_BASE_API, // 超时 timeout: 10000 }) // request拦截器 service.interceptors.request.use(config => { // 是否需要设置 token const isToken = (config.headers || {}).isToken === false ...
axios并不像ajax或者vue-resource那样,它默认post是以Request Payload这种形式来传输的,所以第一次用的时候就被坑到了。不过网上很多解决的方法,我直接就放例子了吧... 以下例子都基于vue-cli 快速创建的那个项目 1.安装axios npm install --save axios ...