速看一个VUE3+TS的学习视频的知识点整理

---

title: 速看一个VUE3+TS的学习视频的知识点整理
date: 2023-02-07 09:40:03.081
updated: 2023-02-07 10:05:52.398
url: https://hexo.start237.top/archives/速看一个vue3ts的学习视频的知识点整理
categories:

• IT技术
  tags:
• vue

---

复习一下关于VUE3的知识

图标库 iconpark

官网： http://iconpark.oceanengine.com/
一个VUE3使用较多的图标库。

动态图标的引入

使用 Component 这个标签即可。

<Component :is="menu.icon" />

router相关

在router中定义激活的<route-link></route-link>的class方法，这样做的目的是可以简化代码

const router = createRouter({
	history:createWebHashHistory(),
    linkActiveClass:'active', // 定义激活的link的类，可以放设置样式。
    routes
})

开发思想方面

尽量将逻辑封装到hook中，Vue3与React18的写法和思想越来越近。都是提高逻辑复用性封装到以 use开头的hooks中，在hooks中，同样的可以使用响应式的数据。

页面方面定义出一个layout的文件目录，专门存方部局相关的组件。
每一个部局中如 footer menu header等尽量在封装成单独的组件供，loayout来调用。

组件传参

数据类型的验证需要这样写是在，defineProps的方法中传递泛型。

const {} = defineProps<{
	icon:any,
	size?:number | string,
	fill?:string | string[]
}>()

axios的二次封装

import axios,{type AxiosRequestConfig} from 'axios';

axios.defaults.baseURL= url;

//请求拦截
axios.interceptors.request.use(
(config:AxiosRequestConfig | any)=>confing
)

//响应拦截

axios.interceptors.response.use(res=>{
	return res
},err=>{
	return Promise.reject(err)
})


// 类型定义 这里的泛型传值要注意
interface IHttp {
	get<T>(url:string,params?:unknown):Promise<T>;
}

const http: IHttp = {

	get(url,params){
    	
        return new Promise((resolve,reject)=>{
        	
            axios.get(url,{params})
            .then(res=>{
            	resolve(res.data)
            })
            .catch(err=>{
            	reject(err)
            })
        })
    }
}

export default http

TS 接口中定义未知属性

使用 proName

export interface IBanner {
	pic:string;
    [proName:string]:any; // 这样定义未知属性
}

VUE3的状态管理插件 pinia的使用

都是模板代码，网上一搜索一大把，不在写啦。