首先你完成了如下：
Vite+vue3+Ts+pinia實戰(zhàn)（一：初始、基礎(chǔ)安裝、踩坑）
Vite+vue3+Ts+pinia開發(fā)（二：路由、pinia、UI庫安裝）
Vite+vue3+Ts+pinia開發(fā)（三：父子通訊、兄弟通訊、數(shù)組清空、ref、reactive的使用）

今天就講講SCSS，Axios，別名的簡單使用吧！

初始目錄：

image.png

一、使用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 創(chuàng)建 components/HelloWorld.scss并引入

image.png

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，并設(shè)置別名

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'
// 創(chuàng)建axios實例
const service = axios.create({
    timeout: 10000 // 請求超時時間
})
// request攔截器
service.interceptors.request.use(
    (config: any) => {
        // if (store.getters.token) {
        // config.headers['X-Token'] = '12222222'// 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
        // }
        return config
    },
    error => {
        // Do something with request error
        console.log(error) // for debug
        Promise.reject(error)
    }
)

// response 攔截器
service.interceptors.response.use(
    response => {
        /**
         * code為非20000是拋錯 可結(jié)合自己業(yè)務(wù)進行修改
         */
        // 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: `網(wǎng)絡(luò)超時，沒有請求到數(shù)據(jù)`,
            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">調(diào)用測試接口</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> 

最后呢，我們總結(jié)下我們學(xué)到了什么。
1 引入SCSS，并使用
2 設(shè)置別名
3 引入Axios，并使用。