游泳健身了解一下:
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模版整体的写完了,但是还是缺少很多东西,有想要加的一些东西在当前模版里的,可以留言我。