简介
webup-preset-element 是一款基于 gulp 的前端工作流模板，可以帮助前端工程师快速构建自定义组件库，并且支持 ES6+，SCSS 等语法糖的编写。
需求
在使用 webup-preset-element 前，我们需要安装以下软件：
- 安装
node.js（版本 >= 8.9.4）； - 安装
npm（版本 >= 5.6）；
使用
安装使用
我们可以运行以下命令来全局安装模板：
npm i -g webup-preset-element
然后，我们可以在项目文件夹下运行以下命令来生成一个项目：
webup-preset-element init
工作流任务
我们可以分别运行 dev 和 build 两个任务，分别是本地开发和打包构建。
dev 命令：
npm run dev
build 命令：
npm run build
使用说明
我们可以在 src 文件夹下创建自己的组件：
-- -------------------- ---- ------- --- --- ----- - --- ----------- - --- ----------- - --- --------- --- -------- --- ---------- --- ------ --- ---------
在 index.js 中，通过以下代码来导入组件：
import Button from './btn.js'
import Dialog from './dialog.js'
export {
Button,
Dialog
}在 style.scss 中编写样式：
$theme-color: #0080ff; @import "btn.scss"; @import "dialog.scss";
在 btn.js 中定义组件：
-- -------------------- ---- -------
------ -------------
----- ------ ------- ----------- -
------------- -
--------
-- -----------
-------------- - -
--------
-------------
---------
--
-
-
--------------------------------- --------在 dialog.js 中定义组件：
-- -------------------- ---- -------
------ ----------------
----- ------ ------- ----------- -
------------- -
--------
-
------------------- -
--- ---------- - ------------------------ ---------
-------------------- - -
------- ---------------
--- ---- ----------------------
--- ----- ---------------------
--- ------
--- ---- --------------------
--- ----- -------------------
--- ------
--- ---- ----------------------
--- ----- ---------------------
--- ------
---------
--
-
-
--------------------------------- --------在使用时，可以直接在HTML文件中使用组件：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
----- ---------------- ------------------ --
------- ------------- ------------------------------
-------
------
---------------------------
----------
-------- ----------------------------
-------- ------------
---------------
---------------
---------------
----------
-------- --------------
-----------------------
-----------------------
----------
-----------
-------
-------结语
通过使用 webup-preset-element，我们可以快速构建自己的组件库，并且可以使用 ES6+，SCSS 等语法糖来编写代码。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8381e8991b448dbe10