Vite+vue3+Ts+pinia开发（四：SCSS、Axios以及别名@的使用）

首先你完成了如下：
Vite+vue3+Ts+pinia实战（一：初始、基础安装、踩坑）
Vite+vue3+Ts+pinia开发（二：路由、pinia、UI库安装）
Vite+vue3+Ts+pinia开发（三：父子通讯、兄弟通讯、数组清空、ref、reactive的使用）

今天就讲讲SCSS，Axios，别名的简单使用吧！

初始目录：

一、使用SCSS

1.1 引入node-sass、sass

npm install node-sass
npm install sass --save-dev
// 踩坑点，如果安装完报错'node-sass@7.0.1 postinstall: `node scripts/build.js'
// npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

1.2 创建 components/HelloWorld.scss并引入

1.3 修改 components/HelloWorld.vue

<template>
    <h1 class="zs">HelloWorld</h1>
</template>
<script setup lang='ts'>
import './HelloWorld.scss'
</script> 

完事就可以直接看到效果了。

二、使用别名

2.1 引入path

npm install path

2.2 修改 vite.config.ts，并设置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // Vite路径别名配置
        alias: {
            '@': path.resolve('./src'),
            '@api': path.resolve('./src/api')
        }
    }
})

2.3 修改tsconfig.json

{
    "compilerOptions": {
        ... 
        "baseUrl": "./",
        "paths": {
            "@/*": ["./src/*"],
            "@api/*": ["./src/api/*"],
        },
    },
}

三、使用axios

3.1 引入axios

npm install axios

3.2 新建src/utils/axios.ts

import axios from 'axios'
import { ElMessage } from 'element-plus'
// 创建axios实例
const service = axios.create({
    timeout: 10000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
    (config: any) => {
        // if (store.getters.token) {
        // config.headers['X-Token'] = '12222222'// 让每个请求携带自定义token 请根据实际情况自行修改
        // }
        return config
    },
    error => {
        // Do something with request error
        console.log(error) // for debug
        Promise.reject(error)
    }
)

// response 拦截器
service.interceptors.response.use(
    response => {
        /**
         * code为非20000是抛错 可结合自己业务进行修改
         */
        // const res = response.data
        // if (res.code !== 20000) {
        //     Message({
        //         message: res.message,
        //         type: 'error',
        //         duration: 5 * 1000
        //     })
        return response.data
    },
    error => {
        console.log('err' + error) // for debug
        ElMessage({
            message: `网络超时，没有请求到数据`,
            type: 'error',
            duration: 3 * 1000
        })
        return Promise.reject(error)
    }
)
export default service;

3.3 新建src/api/index.ts

import request from '@/utils/axios';
const Api = "http://127.0.0.1:3009" ;
const getTest = () => {
    return request({
        url: Api + '/testApi/test',
        method: 'get',
    })
}
export {
    getTest
}

3.4 接口定义完毕后，使用接口。

// components/HelloWorld.vue

<template>
    <h1 class="zs">HelloWorld</h1>
    <el-button @click="replaceStore">调用测试接口</el-button>
</template>

<script setup lang='ts'>
import './HelloWorld.scss'
import { getTest } from '@api/index';

const replaceStore = () => {
    getTest().then((res: any) => {
        console.log(res);
    })
};
</script> 

最后呢，我们总结下我们学到了什么。
1 引入SCSS，并使用
2 设置别名
3 引入Axios，并使用。