在前端开发中,Web Components概念的提出,可以使我们摆脱对第三方框架的依赖,让我们可以更加灵活的开发组件。本篇文章将会介绍@skatejs/web-components
这个 npm 包的使用教程。
简介
@skatejs/web-components
是一个基于 Web Components 标准的框架,它采用了 ES6+、TypeScript 和 JSX 编写,支持 TypeScript、Babel、Rollup 等工具。
安装
npm install @skatejs/web-components
开始使用
注册自定义元素
-- -------------------- ---- ------- ------ - ---------- - - ---- --------------- ----- ----------- ------- --------- - ------ --- ---- - ------ --------------- - -------- - ------ ---------- --------- - - ------------------------------------- -------------展开代码
使用自定义元素
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ------------ ------- ------ -------------- ---------- ----------- --------------- ------- --------------------------------- ------- -------展开代码
开发和构建
如果你使用的是 TypeScript:
-- -------------------- ---- ------- -- ------------- - ------------------ - --------- ------ --------- ------ ---------- ---- -------- - ------------- ------------------------------- - -- ---------- ------- -展开代码
如果你使用的是 Babel:
-- -------------------- ---- ------- -- -------- - ---------- - --------------------- - ---------- - ----------- ------ - ---------- - -- -- ---------- - - ------------------------------------ - --------- --- - - - -展开代码
如果你使用的是 Rollup:
-- -------------------- ---- ------- -- ---------------- ------ ---------- ---- ---------------------------- ------ - ------ - ---- ----------------------- ------ - ----------- - ---- ------------------------------ ------ -------- ---- -------------------------- ------ ----- ---- ----------------------- ------ ------- ---- ------------------------- ------ ------- - - ------ ----------------- ------- - - ----- ------------------ ------- ----- ---------- -------- - -- --------- ---------------- --------------- ------------ -------- - -------------- --------- ----------------------- ---------------------------- --- ----------- ------------- ------- -------- -------------------------------------- - ------- --- ---- ------------- ---------- -------- ----------------- --- -------- ----- ---- -- - - --展开代码
总结
@skatejs/web-components
提供了一个非常简单和科学的Web组件解决方案,是前端 Web 组件开发中不可替代的角色。希望大家能够更好的利用这个插件,开发出更优秀的web组件应用。
示例代码
-- -------------------- ---- ------- ------ - ---------- - - ---- --------------- ----- ----------- ------- --------- - ------ --- ---- - ------ --------------- - -------- - ------ ---------- --------- - - ------------------------------------- -------------展开代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ------------ ------- ------ -------------- ---------- ----------- --------------- ------- --------------------------------- ------- -------展开代码
-- -------------------- ---- ------- -- ------------- - ------------------ - --------- ------ --------- ------ ---------- ---- -------- - ------------- ------------------------------- - -- ---------- ------- -展开代码
-- -------------------- ---- ------- -- -------- - ---------- - --------------------- - ---------- - ----------- ------ - ---------- - -- -- ---------- - - ------------------------------------ - --------- --- - - - -展开代码
-- -------------------- ---- ------- -- ---------------- ------ ---------- ---- ---------------------------- ------ - ------ - ---- ----------------------- ------ - ----------- - ---- ------------------------------ ------ -------- ---- -------------------------- ------ ----- ---- ----------------------- ------ ------- ---- ------------------------- ------ ------- - - ------ ----------------- ------- - - ----- ------------------ ------- ----- ---------- -------- - -- --------- ---------------- --------------- ------------ -------- - -------------- --------- ----------------------- ---------------------------- --- ----------- ------------- ------- -------- -------------------------------------- - ------- --- ---- ------------- ---------- -------- ----------------- --- -------- ----- ---- -- - - --展开代码
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d33