在Vue 3项目中,使用Vite作为构建工具,并结合TypeScript和Element Plus来封装Axios,可以按照以下步骤进行: 1. 初始化Vue 3+Vite+TypeScript项目 首先,确保你已经安装了Node.js和npm(或yarn)。然后,使用Vite的脚手架工具创建一个新的Vue 3项目,并启用TypeScript支持。 bash npm create vite@latest my-vue-app --...
1、安装插件 $ npm install element-plus --save 2、更改main.js文件 import { createApp } from 'vue'import App from'./App.vue'import'./index.css'import ElementPlus from'element-plus'//引用import 'element-plus/dist/index.css'//引用const app =createApp(App) app.use(ElementPlus)//使用app....
(1) 安装 pnpm install element-plus (2) 完全引入 import{ createApp }from'vue'// 引入Element-Plus组件和样式importElementPlusfrom'element-plus'
api.ts进行接口API的统一管理 axios.ts封装请求配置拦截器 status.ts管理接口返回状态码 三、axios.ts 代码内逐行解释 代码语言:javascript 复制 importaxiosfrom'axios';import{showMessage}from"./status";// 引入状态码文件import{ElMessage}from'element-plus'// 引入el 提示框,这个项目里用什么组件库这里引什么/...
一、使用 Vite 创建 Vue3+TS 项目 1.新建一个 temp 文件夹 (1)在桌面新建一个 temp 文件夹,然后在 VS Code 中打开此文件夹,打开一个终端; 2.创建一个 Vue3 项目工程 (1)具体操作如下: npm create vite@latest(1) 输入项目名,如: vite-vue3-ts-less-element_plus ,然后回车 ...
安装Vue3+ts+vite npm init vite@latest 1. 选择y,新建项目名称,选择vue,选择vue-ts 下载完成后执行以下命令行 cd 新建的项目名称 npm i npm run dev 1. 2. 3. 安装Element-Plus npm install element-plus --save 1. 安装完后给main.ts配置以下代码 ...
* axios封装 */ import axios from "axios"; import config from "../config"; import { ElMessage } from 'element-plus' import router from "../router"; const TOKEN_INVALID = 'token 认证失败,请重新登陆!' const ENTWORK_ERROR = '网络请求异常,请稍后重试!' ...
直接上代码 import{useUserStore}from'@/store'import{ElMessage}from'element-plus'importtype{Method,AxiosRequestConfig}from'axios'importaxiosfrom'axios'constserver=axios.create({baseURL:'要替换的url',timeout:5000})server.interceptors.request.use((config)=>{conststore=useUserStore()lettoken=store.token...
vite.config.ts (包括element-plus按需引入及主题色改变,vitest的配置) /// <reference types="vitest" /> import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue' import { resolve } from "path" import viteCompression from 'vite-plugin-compression'; ...