前端vue3_typescript_antd模版

游泳健身了解一下：github 和小伙伴一起搞的日常总结 项目源码 项目预览 本项目借鉴了 Ant Design of Vue Pro

vue3简介

真香警告⚠️确实上手vue3之后感觉看一些逻辑的部分会更加容易的一点，自定义的hook就像是一个具名化的mixins，把我们一套逻辑溶于在一起，确实方便了后期的维护。而ts写了一些我们的逻辑类型，如虎添翼（大型项目）

vue3新增api

讲vue3 的 api 博客多如牛毛，大家自行百度，我就讲讲我遇到坑，由于vue3的文档暂时没有中文（我等英文极为难受），但是可以看ts文件，所以可以尝试出来一些问题

vue3的Router

// 模式使用和之前的进行了修改 createWebHistory 为 History 模式 | createWebHashHistory 为 hash 模式
import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import {constantRouterMap} from './routers'

const routes: Array<RouteRecordRaw> = [
  ...constantRouterMap
]

// history: createWebHistory(process.env.BASE_URL), // History 模式
const router = createRouter({
  history: createWebHashHistory() ,// hash 模式
  routes
})

export default router

vue3的vuex

// 使用体验感觉并无特别大的区别
import { StoreOptions } from 'vuex';
export interface AppInterface{
    sideCollapsed: boolean;
}

const app: StoreOptions<AppInterface> = {
    state: {
        sideCollapsed: false,
    },
    getters: {
        getCollapsed: (state: AppInterface)=> state.sideCollapsed
    },
    mutations: {
        setCollapsed(state: AppInterface){
            state.sideCollapsed = !state.sideCollapsed
        }
    },
}

export default app

vue3 由于 ant 改版之后的问题

<menu-unfold-outlined/>
<menu-fold-outlined/>
ant 改版后用的标签，导致我们动态的icon 无法注入

ant 提供了 如下

import { createFromIconfontCN } from '@ant-design/icons-vue';

const IconFont: any = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
// components
components: {
    IconFont,
},

<icon-font :type="item.icon" />

vue3 之后导致 slot 的问题

<template v-for="item in slotsList" #[item]="text, record, index" :key="item">
    <slot :name="item" :record="record" :index="index" :text="text" />
</template>

# 后面的可以设置动态操作 然后可以直接赋值

vue3 自定义的hook需要一个function来进行一个当前进行时的方法执行

// 可以使用当前的 vue生命周期 和一些插件

// hook
import { useStore } from 'vuex'
import { computed } from 'vue'
import { AppInterface } from '@/store/modules/app.ts'

export const getStoreCollapsed = ()=>{
    const store = useStore<AppInterface>()
    const collapsed = computed(()=>store.getters.getCollapsed)
    const setCollapsed = ()=>{
        store.commit('setCollapsed')
    }
    return {
        collapsed,
        setCollapsed
    }
}
// 使用
   setup(props, ctx){
        const router = useRouter()
        const route = useRoute()
        const { collapsed } = getStoreCollapsed()
        const selectedKeys = ref<Array<string>>([])
        const meList = ref<MenuListInterface[]>([])
        const titleClick = ({ key, domEvent, keyPath}: any)=> {
            router.push(key)
        }
        onBeforeMount(()=>{
            menuList()
                .then((res: AxiosResponse)=>{
                    meList.value = res as unknown as MenuListInterface[]
                    selectedKeys.value = [route.path]
                })
        })
        return {
            meList,
            titleClick,
            collapsed,
            selectedKeys
        }
    }

结尾

vue3模版整体的写完了，但是还是缺少很多东西，有想要加的一些东西在当前模版里的，可以留言我。