前言
Metropolis 是一个现代化的、可视化后台管理系统的解决方案。Metropolis Core 是 Metropolis 架构中的核心模块，是整个系统的核心组成部分，提供了前端组件、UI 模块、请求模块和工具模块等基础模块。
本文将针对 Metropolis Core 的 npm 包使用教程，进行详细的介绍和指导，读者可以通过本文学习到如何在自己的项目中使用 Metropolis Core。
安装
在开始使用 Metropolis Core 之前，需要保证你的机器上已经安装了 Node.js 和 npm。
进入项目根目录并执行以下命令，即可安装 Metropolis Core：
npm install metropolis-core
安装完成后，可以在项目的 node_modules 目录下找到 Metropolis Core 相关的文件。
模块概览
下面是 Metropolis Core 提供的模块概览：
/components：提供了各种自定义组件，比如头像组件、菜单组件、表格组件等。/styles：提供了 Metropolis 基础字体和颜色。/utils/*：提供了许多实用工具函数，比如深拷贝、数组去重、对象合并等。/request/*：提供了对 axios 的二次封装，方便统一对后端进行请求。
下面将对这些模块进行详细介绍。
组件
Metropolis Core 提供了很多自定义组件，可直接在项目中引用。比如以下是一些常用组件的使用示例：
菜单
-- -------------------- ---- -------
----------
--------
------------ --------- ------------------ ----------------------------------
------------ --------- ---------------------------------
------------ --------- ------------------------------------
---------
-----------
--------
------ - ------ --------- - ---- ----------------------------
------ ------- -
----------- -
------
---------
-
-
---------按钮
-- -------------------- ---- -------
----------
-------------------------
--------- ------------------------------
--------- ------------------------------
--------- ------------------------------
--------- -----------------------------
-----------
--------
------ - ------- - ---- ----------------------------
------ ------- -
----------- -
-------
-
-
---------表格
-- -------------------- ---- -------
----------
-------- ------------------ ------------ --
-----------
--------
------ - ------ - ---- ----------------------------
------ ------- -
----------- -
------
--
------ -
------ -
-------- -
-
------ -----
---------- ------
--
-
------ -----
---------- ------
------- --- -- -- ----- - -----
--
-
------ -----
---------- ---------
-
--
----- -
-
----- -------
---- ---
-------- ---- ---- --- -- ---- -----
--
-
----- -------
---- ---
-------- ------- --- - ---- -----
-
-
-
-
-
---------头像
-- -------------------- ---- -------
----------
--------- ---------- ------------ --
--- --
--------- ----------- ------------ --
-----------
--------
------ - ------- - ---- ----------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
---- -------------------------------------------------------------------
----- --
-
-
-
---------表单
-- -------------------- ---- -------
----------
------- ---------- ------------- ---------------
------------ ----------- ----------------
-------- ----------------------- -------------------- --
--------------
------------ ---------- ----------------
-------- --------------- ----------------------- ------------------- --
--------------
-------------
--------- -------------- -----------------------------
--------------
---------
-----------
--------
------ - ------ ---------- ------- ------- - ---- ----------------------------
------ ------- -
----------- -
------
----------
-------
-------
--
------ -
------ -
----- -
--------- ---
--------- --
--
------ -
--------- -- --------- ----- -------- -------- ---
--------- -- --------- ----- -------- ------- --
-
-
--
-------- -
-------- -
------------------------------ -- -
-- ------- -
-- ----
-
--
-
-
-
---------工具
Metropolis Core 还提供了一系列实用工具函数，这里列举一些常用的函数，并给出使用示例：
深拷贝
-- -------------------- ---- -------
------ - --------- - ---- -----------------------
----- ---- - -
-- --
-- -
-- -
-
-
----- ---- - ---------------
-------- - -
--------------------- -- -
--------------------- -- -数组去重
import { uniqueArr } from 'metropolis-core/utils'
const arr = [1, 2, 3, 1, 2]
console.log(uniqueArr(arr)) // [1, 2, 3]对象合并
-- -------------------- ---- ------- ------ - -------- - ---- ----------------------- ----- ---- - - -- -- -- - - ----- ---- - - -- -- -- - - -------------------------- ------ -- - -- -- -- -- -- - -
请求
Metropolis Core 对 axios 进行了二次封装，使用起来更加方便，下面是一个请求示例：
import { request } from 'metropolis-core/request'
request.get('/user/info', { id: 1 }).then(res => {
// 处理数据
}).catch(error => {
// 处理错误
})结语
本文详细介绍了 Metropolis Core 的 npm 包，让读者了解了该框架的基本模块、工具、组件和请求方式，并给出了一些示例代码。通过阅读本文，读者可以快速掌握 Metropolis Core 的 npm 包的使用方法，加速自己在项目开发中的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040f75