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