【Vue3+Vite+TS】8.0 组件六：导航菜单
Menu
```
---
### **Type Definition**
**Type Creation**
- Create `src/components/baseline/menu/src/types.ts`
- Code:
```ts
interface MenuItem {
icon?: string
name: string
code: string
children?: MenuItem[]
}
```
---
### **Component Registration**
**Component Registration**
- Create `src/components/baseline/menu/index.ts`
- Code:
```ts
import { App } from 'vue'
import Menu from './src/index.vue'
export { Menu }
// Component usage via `use`
export default {
Menu,
install(app: App) {
app.component('bs-menu', Menu)
}
}
```
---
### **Component Integration**
**Component Integration**
- Modify `src/components/baseline/index.ts`
- Code:
```ts
import { App } from 'vue'
import ChooseArea from './chooseArea'
import ChooseIcon from './chooseIcon'
import Container from './container'
import Trend from './trend'
import Notification from './notification'
import List from './list'
import Menu from './menu'
const components = [
ChooseArea,
ChooseIcon,
Container,
Trend,
Notification,
List,
Menu
]
export { ChooseArea, ChooseIcon, Container, Trend, Notification, List, Menu }
// Component usage via `use`
export default {
install(app: App) {
components.map(item => {
app.use(item)
})
},
ChooseArea,
ChooseIcon,
Container,
Trend,
Notification,
List,
Menu
}
```
---
### **Routing Integration**
**Routing Update**
- Modify `src/router/index.ts`
- Code:
```ts
{
path: '/menu',
component: () => import('../views/baseline/menu/index.vue')
}
```
---
### **Component Implementation**
**Component Implementation**
- Create `src/views/baseline/menu/index.vue`
- Code:
```vue
menus
}
})
```
---
### **Final Component Integration**
**Component Integration**
- Modify `src/views/baseline/menu/index.vue`
- Code:
```vue
