简介
frontendbyben 是一款集成了常用前端工具、模板和组件的 npm 包，旨在帮助前端工程师提高开发效率。其中包含了以下内容：
webpack配置和插件，支持多页面开发。- 常用的
Sass、Less、PostCSS工具链。 - 一些常用的
jQuery插件，比如日期选择器、轮播图等。 - 常用的第三方库，比如
axios、echarts、lodash等。 - 一些常用的前端框架，比如
Vue、React等。 - 一些常用的前端 UI 库，比如
Element UI、Ant Design等。 - 一些前端常用业务组件，比如登录、注册、验证码等。
本文将详细介绍如何使用 frontendbyben 包来进行前端开发。
安装
在终端中，进入你的项目目录，执行以下命令：
npm install frontendbyben --save
使用
webpack 配置
在你的项目根目录下面创建一个名为 webpack.config.js 的文件，对 frontendbyben 的 webpack 配置进行覆盖，示例如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- ------------------ - -----------------------------------------
----- - --------------- - - ----------------------
-------------- - -
----- -------------
------ -
------ -----------------
------ ----------------
--
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- ---------
------- ------------
--
-
----- --------
-------- ---------------
------- --------------
--
-
----- --------------
---- -
---------------
-------------
--------------
-
------- ------------------------
-------- -
---------- -
----------------------- --------------------------
----------------------- -----------------------------
-
--
--
--
--
-
--
-------- -
--- ----------------------------
-------- ----
--------- --------------------------------------
---
--- -------------------
------ --------
------- --------- ----------
--------- -------------
--------- ---------------------
---
--- -------------------
------ --------
------- --------- ----------
--------- -------------
--------- ---------------------
---
--- --------------------
--------- ----------------------- ------------------------
----------- ---------
----------- ---------
---
--- ------------------
--
-------- -
------ -
---- ----------------------- --------
--
----------- ------- ------- --------
-
--该配置包含了以下内容：
- 支持多页面开发，entry 中定义了多个入口文件。
- 支持
Vue，对.vue文件进行了处理。 - 支持
Sass，对.s(c|a)ss文件进行了处理，同时引入了一些本地的全局样式。 - 引用了
frontendbyben内部自己打包的vendor.dll.js，包含一些常见的第三方库。
如果你需要修改配置，只需要在这个配置的基础上进行扩展即可。
工具链
frontendbyben 内置了一些常用的 sass 工具链，这些工具链包括了一些常用的 sass 变量和 mixins，以及内置了一些常用的 @extend 方法，这些工具链可以大大提高项目中的 sass 编写效率。
在你的 sass 文件中，可以通过 @import 导入 frontendbyben 的工具链，示例如下：
-- -------------------- ---- -------
-- -- -- ------------- - ----- ---
------- -----------------------------
------- --------------------------------
-- -- -----------
------- -
-------- --- -----
------ -----
----------------- -----
-------------- ----
-- -- ------------- ----- -----
-------- ------------ --- --- ------- -- -- -------
-- -- ------------- --- ----- -----
-------- ----- -
----------------- -----
-
-组件
frontendbyben 包内置了一些常用的业务组件，这些组件可以大大提高开发效率，同时保证了组件的质量和兼容性，以下是一些常用的组件示例：
登录表单
-- -------------------- ---- -------
----------
----- ------------------------
---- -------------------
------ --------------------------
------ -------------------- ----------- ------------------ --
------
---- -------------------
------ -------------------------
------ -------------------- --------------- ------------------ --
------
------- ---------- ------------------------
-------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
--------- ---
--
--
-------- -
------- -
-- ----- ------
-
--
--
---------注册表单
-- -------------------- ---- -------
----------
----- ---------------------------
---- -------------------
------ --------------------------
------ -------------------- ----------- ------------------ --
------
---- -------------------
------ -------------------------
------ -------------------- --------------- ------------------ --
------
---- -------------------
------ ----------------------------------
------ -------------------- --------------- ------------------------- --
------
------- ---------- ------------------------
-------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
--------- ---
---------------- ---
--
--
-------- -
---------- -
-- ----- ------
-
--
--
---------验证码
-- -------------------- ---- -------
----------
------- ---------- ------------ -----------------
----- -------------- -- ------------- ---- ---------
----- -------------------------
----- ------------------ --------- ---------
---------
-----------
--------
------ ------- -
------ -
----- -
----- -------
-------- --------
--
---- -
----- -------
--------- -----
--
------- -
----- -------
-------- -- -- -----
--
--------- -
----- -------
-------- ---
--
--
------ -
------ -
-------- ------
--------- ------
---------- --
--
--
-------- -
--------- -
-- ------------- -- -------------- -
-------
-
------------ - -----
-------------------- ---------------------------- -- -
----- - ---- - - ---------
------------ - ------
------------- - -----
-------------- - --------------
----- ----------------- - -------------- -- -
-----------------
-- --------------- -- -- -
---------------------------------
------------- - ------
-
-- ------
----------- -- -
------------ - ------
---------------------
---
--
--
--
---------更多组件可以查看 frontendbyben 内的 src/components 目录。
第三方库
frontendbyben 包内置了许多常用的第三方库，例如 axios、echarts、lodash 等，这些库可以大大提高开发效率，同时保证了质量和兼容性，使用方法示例如下：
axios
-- -------------------- ---- ------- ------ ----- ---- -------- ---------------------- - ----- ---------------------- - ------------------------- ----------------------------------- -- - --------------------------- ---------------- -- - ------------------- --- -------------------- - ----- ------ ---- --- ------------------ -- - --------------------------- ---------------- -- - ------------------- ---
echarts
-- -------------------- ---- -------
------ ------- ---- ----------
----- ------- - --------------------------------------------------
-------------------
------ -
----- -------- ------
-------- ----------
--
-------- -
-------- -------
------------ -
----- ---------
--
--
------- -
----- -------- ------- ------- ------- --------
--
----- -
----- -----
------ -----
------- -----
------------- -----
--
------ -
-
----- -----------
----- ------ ----- ----- ----- ----- ----- ------
--
--
------ -
-
----- --------
--
--
------- -
-
----- -------
----- ------
----- ----- ---- ---- ---- ---- ---- -----
--
-
----- -------
----- ------
------ -----
----- ----- ---- ---- ---- --- ---- -----
--
-
----- -------
----- ------
------ -----
----- ----- ---- ---- ---- ---- ---- -----
--
-
----- -------
----- ------
------ -----
----- ----- ---- ---- ---- ---- ---- -----
--
-
----- -------
----- ------
----- ----- ----- ---- ----- ----- ----- ------
--------- -
---------- -
----- ---------
--
----- -
-- ----- ----- -- - ----- ----- ---
--
--
--
--
---lodash
-- -------------------- ---- ------- ------ - ------ ----- ----- - ---- --------- ----- --- - ---------- ----- --------- - --------- --- ----- --- - ---------- ------ -- ---- - --- ----------------- -- --- -- -- -- -- -- -- -- -- -- ----------------------- -- --- -- -- -- -- ----------------- -- --
更多第三方库可以查看 frontendbyben 包内的 package.json 和 src/lib 目录。
总结
frontendbyben 是一款非常实用的 npm 包，它内置了许多常用的工具、组件和第三方库，可以大大提高前端开发的效率和质量。通过本文的介绍，相信读者已经了解如何安装和使用该包，希望能够对读者在前端开发中起到一定的指导作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e03c5