一、什么是 mk-app-meta-design
mk-app-meta-design 是一个 npm 包，它可以帮助前端开发者快速的创建一个应用的头部导航和侧边导航。
在实际开发的过程中，头部和侧边导航是每一个应用都需要进行实现的功能。但是，实现这样的功能却需要工程师们花费大量的精力去完成这些琐事。
mk-app-meta-design 可以帮助工程师们减轻这个负担。通过快速的引入 npm 包，我们就可以创建出一个优美、高效的应用导航。
二、如何使用 mk-app-meta-design
1. 安装
要使用 mk-app-meta-design，我们首先需要安装它。
npm install mk-app-meta-design --save
2. 引入
安装之后，我们需要在项目中引入 mk-app-meta-design。具体的引入方式如下：
import { siderMenus, navTree } from 'mk-app-meta-design'
import 'mk-app-meta-design/dist/mk-app-meta-design.css'通过这段引入代码，我们可以获取到两个对象：
- siderMenus：侧边栏菜单信息
- navTree：头部导航栏信息
3. 使用示例
我们可以在项目的 routerConfig 中使用 siderMenus 和 navTree。
具体来说，我们可以把 siderMenus 和 navTree 中的信息嵌入到 route 的 meta 中，这样我们就可以在渲染页面的时候获取到这些信息。
-- -------------------- ---- -------
------ - ----------- ------- - ---- --------------------
-- -----
----- ------------ - -
-
----- ----
---------- -- -- ---------------------------
----- -
------ -----
-------- -------
------------ -- ----- ---- ---
----------- -----------
-------- -------
--
--------- --
-
-在我们完成上述的设置之后，我们就可以在页面中渲染出 mk-app-meta-design 提供的优美导航了。
三、结论
通过使用 mk-app-meta-design 这样的 npm 包，我们可以快速的实现一个应用的头部和侧边导航。因此，它也是前端开发者们必备的一个工具。
此外，在实际应用中，我们还需要注意以下几点：
- 尽量避免直接修改引入的 npm 包中的代码，以保证稳定性。
- 在使用之前，先了解清楚 mk-app-meta-design 提供的 API，以便于我们能够更加有效地使用它。
- 尽量保持代码的简洁性和可读性。
最后，需要注意的是，mk-app-meta-design 的功能仅限于头部和侧边导航的实现。其他的页面实现，仍需要开发者自行完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b581e8991b448dff42