vue3(vite+typeScript+pina)使用记录

1.node.js环境配置（使用nvm管理node版本）

nvm下载地址 Releases · coreybutler/nvm-windows · GitHub

使用教程：Nvm，Nrm使用教程_小满zs的博客-CSDN博客

2.使用vite创建vue3项目

npm init vue@latest

sass安装命令

vue add style-resources-loader
 
npm install node-sass sass-loader sass -D

vue 3.x - 安装scss/sass - 面包_girl - 博客园

3.结合使用element-plus和axios

一个 Vue 3 UI 框架 | Element Plus（可按需引入）

npm install element-plus --save

axios

vue-axios

axios拦截器 api/index.ts

import axios from "axios";
 
//创建axios实例
const service = axios.create({
    baseURL: "https://yingdie-net-new.windoent.com",
    timeout: 5000,
    headers: {
        "Content-type": "application/json;charset=utf-8"
    }
});
 
//请求拦截
service.interceptors.request.use((config) => {
    if (localStorage.getItem('token')) {
        // @ts-ignore
        config.headers.token = localStorage.getItem('token')
    }
    return config;
})
//响应拦截
service.interceptors.response.use((res) => {
    const code: number = res.data.code;
    if (code != 0) {
        return Promise.reject(res.data);
    }
    return res.data;
}, (error => {
    console.log(error)
}))
 
export default service;

api/api.ts

import service from "./index";
 
export function getMainBanner() {
    return service({
        url: '/other/mainbanner/cachelist',
        method: 'get'
    })
}

4.自动引入插件 unplugin-auto-import/vite  使用教程GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup

5.学习笔记

.小满zs的博客_CSDN博客-Vue3,typeScript,前端领域博主6666

6.pinia持久化本地插件

Basic usage | Pinia Plugin Persist

7.练习小项目代码地址：https://gitee.com/zkkgreate/vite-ts-vue3