在现代前端开发中，借助互联网上已有的资源可以大大提高开发效率，逐渐成为了国际化开发方式。其中，npm 是前端开发中包管理工具的首选。在众多 npm 包中，pjh-mobile-ui 是一个非常优秀的移动端 UI 组件库。
本文将详细介绍如何使用 npm 包 pjh-mobile-ui，以及如何保证在项目中正确使用，避免出现错误。
安装
对于新项目，可以在项目目录下使用如下命令安装 pjh-mobile-ui：
npm install pjh-mobile-ui -S
如果你的项目使用的是 yarn，则可以使用以下命令：
yarn add pjh-mobile-ui
使用
在你需要使用 pjh-mobile-ui 的文件中，通过 import 或 require 导入对应的组件即可开始使用。例如，在一个 Vue.js 文件中添加如下代码即可使用 pjh-mobile-ui 的 Button 组件：
-- -------------------- ---- -------
----------
----------------- ---------------
-----------
--------
------ - ------ -- --------- - ---- ----------------
------ ------- -
----------- -
------------- ---------
-
--
---------按照上面的方法可以在你的项目中使用 pjh-mobile-ui 的所有组件。
按需加载
默认情况下，在项目中引入 pjh-mobile-ui 库会将所有的样式与组件一起打包进最终生成的项目中。但是，这对于复杂的项目来说，很容易导致项目变得臃肿，影响加载速度。
为了更好地使用 pjh-mobile-ui，推荐按需加载组件。pjh-mobile-ui 使用了 Babel 7 的动态模块导入（Dynamic import）方式，因此我们可以直接通过这一特性来实现按需加载。在 Vue.js 环境下，可以使用以下方法进行按需加载：
-- -------------------- ---- -------
----------
-----
------- ------------------------ ---------------
---------- ---------------- ---------- ---------- ---------------- --
------
-----------
--------
----- ------ - -- -- ------------------------------------------- -- -----------
----- ------------- - -- --
-------------------------------------------------- -- -----------
------ ------- -
------ -
------ -
---- ------
---- ------
---------------- -----
--
--
--------- -
------------ -
------ -------------------- - ------ - --------------
-
--
-------- -
------------ -
-------------------- - -----
--
--------- -
-------------------- - ------
-
-
--
---------通过在 import 语句中指定组件的路径，可以实现按需加载组件。在本例中，只有 Dialog 和 ConfirmDialog 组件会被加载，从而避免将所有组件一起打包进最终生成的项目中。
示例代码
由于篇幅限制，这里仅给出一个按钮示例代码。如果需要其他组件使用示例，可以查看 pjh-mobile-ui 的官方文档。
-- -------------------- ---- -------
----------
-----
----------- ------------------ ------------------ -----------------
-- ---------- --
-------------
------
-----------
--------
------ - ------ -- --------- - ---- ----------------
------ ------- -
----------- -
------------- ---------
--
------ -
------ -
----------- ------ ----
----------- ----------
----------- -------
--
--
-------- -
--------- -
---------- ------- ------
-
-
--
---------总结
本文介绍了 npm 包 pjh-mobile-ui 的使用方法以及如何按需加载组件。通过上述方法，我们可以快速地在项目中使用 pjh-mobile-ui 的相关组件，并且保证打包后的项目大小合理、加载速度快。在日常开发中，建议大家多借助优秀的 npm 包，以提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005785181e8991b448eaf01