首先你完成了如下：
Vite+vue3+Ts+pinia實(shí)戰(zhàn)（一：初始席爽、基礎(chǔ)安裝凌外、踩坑）
Vite+vue3+Ts+pinia開(kāi)發(fā)（二：路由、pinia烟馅、UI庫(kù)安裝）
Vite+vue3+Ts+pinia開(kāi)發(fā)（三：父子通訊说庭、兄弟通訊、數(shù)組清空郑趁、ref刊驴、reactive的使用）
今天就講講SCSS，Axios寡润，別名的簡(jiǎn)單使用吧捆憎！
初始目錄：
image.png
一、使用SCSS
1.1 引入node-sass梭纹、sass
npm install node-sass
npm install sass --save-dev
// 踩坑點(diǎn)躲惰，如果安裝完報(bào)錯(cuò)'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實(shí)例
const service = axios.create({
timeout: 10000 // 請(qǐng)求超時(shí)時(shí)間
})
// request攔截器
service.interceptors.request.use(
(config: any) => {
// if (store.getters.token) {
// config.headers['X-Token'] = '12222222'// 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改
// }
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// response 攔截器
service.interceptors.response.use(
response => {
/**
* code為非20000是拋錯(cuò) 可結(jié)合自己業(yè)務(wù)進(jìn)行修改
*/
// 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í)瞬沦，沒(méi)有請(qǐng)求到數(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)用測(cè)試接口</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曙痘，并使用芳悲。
