一,初始化项目
1、npm init vite@latest
选择vue-ts
二,配置路由
1、npm i vue-router@next -S
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'index',
meta: {
title: '后台管理系统'
},
component: () => import('../view/index.vue')
}
]
const routers = createRouter({
history: createWebHashHistory(),
routes,
})
routers.beforeEach((to, from, next) => {
next()
})
export default routers
2、在src 下创建view文件夹 存放视图路径 index.vue
3、在app.vue 添加
4、 在main.ts 里配置
import router from './router/index'
createApp(App).use(router).mount('#app')
三,配置sass
1、安装 npm i sass -D
2、在.vue 中运用
<style lang="scss">
四,配置axios
npm install axios
1、在src下新建http 文件夹 ,再新建index.ts
import axios from 'axios'
// http/index.ts
import axios from 'axios'
//创建axios的一个实例
var instance = axios.create({
// baseURL: import.meta.env.VITE_RES_URL, //接口统一域名
timeout: 6000, //设置超时
headers: {
'Content-Type': 'application/json;charset=UTF-8;',
}
})
//请求拦截器
instance.interceptors.request.use((config: any) => {
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
const token = window.localStorage.getItem('token');
token && (config.headers.Authorization = token)
//若请求方式为post,则将data参数转为JSON字符串
if (config.method === 'POST') {
config.data = JSON.stringify(config.data);
}
return config;
}, (error) =>
// 对请求错误做些什么
Promise.reject(error));
//响应拦截器
instance.interceptors.response.use((response) => {
//响应成功
console.log('拦截器报错');
return response.data;
}, (error) => {
console.log(error)
//响应错误
if (error.response && error.response.status) {
const status = error.response.status
console.log(status);
return Promise.reject(error);
}
return Promise.reject(error);
});
export default instance;
2、再http下新建axiox.ts
import instance from "./index"
/**
* @param {String} method 请求的方法:get、post、delete、put
* @param {String} url 请求的url:
* @param {Object} data 请求的参数
* @param {Object} config 请求的配置
* @returns {Promise} 返回一个promise对象,其实就相当于axios请求数据的返回值
*/
const axios = async ({
method,
url,
data,
config
}: any): Promise<any> => {
method = method.toLowerCase();
if (method == 'post') {
return instance.post(url, data, { ...config })
} else if (method == 'get') {
return instance.get(url, {
params: data,
...config
})
} else if (method == 'delete') {
return instance.delete(url, {
params: data,
...config
})
} else if (method == 'put') {
return instance.put(url, data, { ...config })
} else {
console.error('未知的method' + method)
return false
}
}
export {
axios
}
3、在src 下新建api 文件夹 ,在新建api.ts
import { axios } from "../http/axios"
//敏感词校验
export const getUser = (data: any) => {
return axios({
url: "/getUser",
data,
method: "get",
config: {
// headers: {
// 'Request-Type': 'wechat'
// },
timeout: 10000
}
})
}
4、去页面调用
<script setup lang="ts">
import { getUser } from "../api/index";
const s = await getUser({
text: "里斯",
});
console.log(s);
</script>