在cmd命令输入
npm init vite@latest
输入项目名称
选择vue
选择vue-ts
在输入对应的命令就可以了
aixos封装
- npm install axios -S
- 在src目录下新建apis文件，
- 在apis文件里面新建http.ts
import axios from "axios";
// 创建一个自定义的Axios对象
const Axios = axios.create({
baseURL: "http://backend-api-01.newbee.ltd/api/v1",
timeout: 3000,
/*也可以不设置Content-Type，影响是在你发送请求时
Vue会先发送OPTIONS包探测路由是否存在，需要后端也做设置响应OPTIONS
方法，否则会报跨域错误；我这里用的Beego2，路由里不响应OPTIONS方法，
所以我在这块设置Content-Type*/
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
/*这个配置很重要，允许axios携带用户Cookie到后端，不设置这个的话
Set-Cookie是无效的,除此之外,Chrome默认开启了SameSite检查，如果
后端不主动设置SameSite = none,Set-Cookie是无效的。详情请文章末尾
参考阮老师的SameSite讲解*/
withCredentials: true,
});
Axios.interceptors.request.use(
(req) => {
// 请求拦截处理
// console.log('这里是请求拦截器，我拦截了请求', req);
return req;
},
(err) => {
console.log("在发送请求时发生错误，错误为", err);
//这里不能直接放回err,需要按照官方说明返回一个Promise
return Promise.reject(err);
}
);
Axios.interceptors.response.use(
(res) => {
// 响应拦截处理
// console.log('响应拦截 ', res);
return res.data;
},
(error) => {
const err = error.toString();
//按照实际的响应包进行解析，通过关键字匹配的方式
switch (true) {
case err.indexOf("Network") !== -1:
console.log("后端服务器无响应或者URL错误", err);
break;
case err.indexOf("timeout") !== -1:
console.log("请求后端服务器超时！", err);
break;
}
return Promise.reject(error);
}
);
//暴露Axios实例化对象，允许所有文件调用Axios
const http = {
get(url: string,) {
const config = {
method: "get",
url: url,
}; /*这里如果GET请求有参数，则携带上传入的参数，在
URL中以？的方式放在请求链接中*/
// if (params) config.params = params;
return Axios(config);
},
post(url: any, params: any) {
const config = {
method: "post",
url: url,
data:''
}; /*同理也是传入用户需要发送到后台的参数，这些参数
放在报文中，载体表达标准是JSON*/
if (params) config.data = params;
return Axios(config);
},
};
export default http;
- 在apis文件下新建api.ts
import http from './http.js'
// 获取验证码，这个函数指的是使用GET请求请求目标服务器的
// Captcha路由
export function getHome() {
return http.get("/index-infos")
}
// // 验证用户名\密码，这里指的是使用POST方法请求Login接口，并携带params对象作为参数。
// export function verifyUserNameAPI(params) {
// return http.post("/login", params)
// }
- 调用的方法
<template>
<h1>logins</h1>
</template>
<script lang="ts">
import { ref } from "@vue/runtime-dom";
import { getHome } from "@/apis/api";
import { onMounted } from "vue";
export default {
setup() {
let captchaId = ref();
onMounted(() => {
getcaptchaAPI();
});
function getcaptchaAPI() {
getHome()
.then((res: any) => {
console.log(res);
})
//在这里处理错误
.catch((err: any) => console.log(err));
}
},
};
</script>
<style></style>
router路由安装
- npm install vue-router@next --save
- src 文件夹下创建 router 文件夹，router 文件夹下创建 index.js 文件
- 配置 router.js 文件
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import HelloWorld from "../components/HelloWorld.vue";
// 2. 定义路由配置
const routes = [
{ path: "/",redirect: '/HelloWorld' },
{ path: "/HelloWorld",name:"HelloWorld", component: HelloWorld },
];
// 3. 创建路由实例
const router = createRouter({
// 4. 采用hash 模式
history: createWebHashHistory(),
// 采用 history 模式
// history: createWebHistory(),
routes, // short for `routes: routes`
});
export default router
- mian.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
const app = createApp(App)
// 引入路由对象实例
import router from './router/index.js'
app.use(router)
app.mount('#app')
- 组件中使用
<template>
<div>hello</div>
</template>
<script>
// 引入vue-router
import { useRouter,useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
const router = userRouter();
// 接收参数
console.log(route);
// 路由跳转
router.push("/");
},
};
</script>
