npm包@skatejs/web-components使用教程

阅读时长 8 分钟读完

在前端开发中,Web Components概念的提出,可以使我们摆脱对第三方框架的依赖,让我们可以更加灵活的开发组件。本篇文章将会介绍@skatejs/web-components这个 npm 包的使用教程。

简介

@skatejs/web-components是一个基于 Web Components 标准的框架,它采用了 ES6+、TypeScript 和 JSX 编写,支持 TypeScript、Babel、Rollup 等工具。

安装

开始使用

注册自定义元素

-- -------------------- ---- -------
------ - ---------- - - ---- ---------------

----- ----------- ------- --------- -
  ------ --- ---- - ------ --------------- -
  -------- -
    ------ ---------- ---------
  -
-

------------------------------------- -------------
展开代码

使用自定义元素

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  --------- ------------
-------
------
  --------------
    ---------- -----------
  ---------------
  ------- ---------------------------------
-------
-------
展开代码

开发和构建

如果你使用的是 TypeScript:

-- -------------------- ---- -------
-- -------------
-
  ------------------ -
    --------- ------
    --------- ------
    ---------- ----
    -------- -
      ------------- -------------------------------
    -
  --
  ---------- -------
-
展开代码

如果你使用的是 Babel:

-- -------------------- ---- -------
-- --------
-
  ---------- -
    --------------------- -
      ---------- -
        ----------- ------ - ----------
      -
    --
  --
  ---------- -
    -
      ------------------------------------
      -
        --------- ---
      -
    -
  -
-
展开代码

如果你使用的是 Rollup:

-- -------------------- ---- -------
-- ----------------
------ ---------- ---- ----------------------------
------ - ------ - ---- -----------------------
------ - ----------- - ---- ------------------------------
------ -------- ---- --------------------------
------ ----- ---- -----------------------
------ ------- ---- -------------------------

------ ------- -
  -
    ------ -----------------
    ------- -
      -
        ----- ------------------
        ------- -----
        ---------- --------
      -
    --
    --------- ---------------- --------------- ------------
    -------- -
      --------------
      ---------
        ----------------------- ----------------------------
      ---
      -----------
      -------------
      -------
        -------- -------------------------------------- - ------- --- ----
        ------------- ----------
        -------- -----------------
      ---
      --------
        ----- ----
      --
    -
  -
--
展开代码

总结

@skatejs/web-components提供了一个非常简单和科学的Web组件解决方案,是前端 Web 组件开发中不可替代的角色。希望大家能够更好的利用这个插件,开发出更优秀的web组件应用。

示例代码

-- -------------------- ---- -------
------ - ---------- - - ---- ---------------

----- ----------- ------- --------- -
  ------ --- ---- - ------ --------------- -
  -------- -
    ------ ---------- ---------
  -
-

------------------------------------- -------------
展开代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  --------- ------------
-------
------
  --------------
    ---------- -----------
  ---------------
  ------- ---------------------------------
-------
-------
展开代码
-- -------------------- ---- -------
-- -------------
-
  ------------------ -
    --------- ------
    --------- ------
    ---------- ----
    -------- -
      ------------- -------------------------------
    -
  --
  ---------- -------
-
展开代码
-- -------------------- ---- -------
-- --------
-
  ---------- -
    --------------------- -
      ---------- -
        ----------- ------ - ----------
      -
    --
  --
  ---------- -
    -
      ------------------------------------
      -
        --------- ---
      -
    -
  -
-
展开代码
-- -------------------- ---- -------
-- ----------------
------ ---------- ---- ----------------------------
------ - ------ - ---- -----------------------
------ - ----------- - ---- ------------------------------
------ -------- ---- --------------------------
------ ----- ---- -----------------------
------ ------- ---- -------------------------

------ ------- -
  -
    ------ -----------------
    ------- -
      -
        ----- ------------------
        ------- -----
        ---------- --------
      -
    --
    --------- ---------------- --------------- ------------
    -------- -
      --------------
      ---------
        ----------------------- ----------------------------
      ---
      -----------
      -------------
      -------
        -------- -------------------------------------- - ------- --- ----
        ------------- ----------
        -------- -----------------
      ---
      --------
        ----- ----
      --
    -
  -
--
展开代码

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d33

纠错
反馈

纠错反馈