easy use `Ant Design Vue` layout
# yarn yarn add @ant-design-vue/pro-layout # npm npm i @ant-design-vue/pro-layout -S
First, you should add the icons that you need into the library.
import { createApp } from 'vue' import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout';const app = createApp();
app.use(ProLayout) .use(PageContainer) .mount('#app')
After that, you can use pro-layout in your Vue components as simply as this:
or
TSX```tsx import { defineComponent, reactive } from 'vue'; import ProLayout, { createRouteContext, RouteContextProps } from '@ant-design-vue/pro-layout';
export default defineComponent({ setup () { const [ RouteContextProvider ] = createRouteContext();
const state = reactive({ collapsed: false,openKeys: ['/dashboard'], setOpenKeys: (keys: string[]) => (state.openKeys = keys), selectedKeys: ['/welcome'], setSelectedKeys: (keys: string[]) => (state.selectedKeys = keys), isMobile: false, fixSiderbar: false, fixedHeader: false, menuData: [], sideWidth: 208, hasSideMenu: true, hasHeader: true, hasFooterToolbar: false, setHasFooterToolbar: (has: boolean) => (state.hasFooterToolbar = has),
});
return () => ( ) }
}) ```
npm run compile # Build library npm run test # Runing Test