This project draws on Ant Design of Vue Pro

Vue3 profile

Zhen Xiang warns ⚠️ that it will be easier to see some logic parts after really getting used to vue3. Custom hooks are like a named mixins, which dissolve a set of logic together, which is really convenient for later maintenance. And TS wrote some of our logic types, like a tiger with wings (large project)

Vue3 new API

There are a lot of API blogs about vue3, so let me tell you about the problems I met. Because the vue3 document is not in Chinese at the moment (I feel very uncomfortable for English), but I can see the TS file, so I can try to solve some problems

The Router vue3

/ / mode before use and modified createWebHistory pattern for History | createWebHashHistory to hash mode import {createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router' import {constantRouterMap} from './routers' const routes: Array<RouteRecordRaw> = [ ...constantRouterMap ] // history: CreateWebHistory (process.env.base_url), // History mode const router = createRouter({History: CreateWebHashHistory (),// hash mode routes}) export default routerCopy the code

The 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 appCopy the code

Vue3 is due to problems after ant revision

<menu-unfold- statements /> <menu-fold-outlined/> Ant provides the following 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" />Copy the code

Vue3 causes slot problems

<template v-for="item in slotsList" #[item]="text, record, Index ":key="item"> <slot :name="item" :record="record" :index="index" :text="text" /> </template> # And then you can just assignCopy the code

Vue3 custom hooks require a function to perform a current continuous method execution

// You can use the current vUE lifecycle and some plug-ins // 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}} // 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 } }Copy the code

At the end

The vue3 template is finished as a whole, but there are still many things missing. If there are some things you want to add in the current template, please leave a message to me.