当随着功能越来越丰富,需要我们规划好主菜单,单击某个菜单项,加载某个功能。
1、引入element-plus
Element Plus,由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库.
npm install [email protected]
修改main.ts:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
如果显示不满屏,改index.html,加上:
<body style="margin: 0 !important">
2、封装菜单组件
src/components/MainMenu.vue,有兴趣的同学可以留言索要完整代码:
<template>
<div v-if="showAside" v-show="!isShow" id="menu" :title="showMenu?'关闭菜单':