什么是story2frontify
Story2frontify是一个npm包，用于将Vue.js或React击穿的Storybook文档样式与Frontify品牌管理工具集成。
安装
在命令行中输入以下命令以安装story2frontify：
npm install story2frontify --save-dev
快速开始
在您的Vue或React项目中，创建一个名为storybook的文件夹。 在其中，使用您喜欢的框架配置Storybook。 在您的Storybook中，您将可以设置扩展名将story的信息推送到Frontify。
在您的Storybook配置中找到“ webpackFinal”选项：
-- -------------------- ---- -------
-------------- - -
-------- ------------------------------------------------
------- -
---------------------------
-------------------------
------------------------------
--
------------- ----- -------- - ---------- -- -- -
--------------------------
----- ----------------
---- ---------------- ------------- ---------------
-------- ----------------------- -------
---
---------------------- - -
--- ---------------------
----------- ----------------------- -------------------
---
--
-- --- --- -------- ------- -------
--------------------------
----- -----------------------
---- -
-
------- --------------
-------- -
--------- ------
----- --------------------------------------
--------- ------
--
--
--
---
-- ------ --- ------- ------------- -- --- --- ------ -- -------- --- ------- ----------- -------- ---- --- ----- -----------
--------------------
--- ----------------------
-------------- ---------------------------------------- -- -----
--------------- ----------------------------------------- -- -----
----------- ------------------------------------- -- -----
----------------- ---------------
---------------------------- -- ---
--
------------------------------- ---------------
------------------------------------------ -- --
--
---------------------- ---------------
--------------------------------- -- --
--
--
--
-- ---- ---- --------- --- -------- ------------- --- ---- -- --- -------
----------------------- -----------------------
-- -------- ------ --- -------- ------- -------------
------ -------
--
--接下来，将StoryMarkdownPlugin()插入到plugins列表中：
-- -------------------- ---- -------
-------- -
-
-----------------
-
------- ------------------------
----------- -------------------
------- -----------------
------------ -----------------
---- ------------
---------------------- ---------
--
--
--请注意，此处包括该包的主要配置参数：
- apiKey - 此处填写Frontify管理控制台中的API密钥。
- frontifyId - 这是Frontify团队/项目的唯一标识符，用于将文档条目推送到正确的位置。
- domain - Frontify品牌管理控制台的地址。
- storiesPath - 将Storybook中的文档推送到Frontify的路由。
- env - 此处应匹配Storybook中的环境名称。
- documentationCreation - 此处应指定是要向Frontify上传文档还是更新现有文档。 对于文档的第一次提交，请将此设置为“upload”。 更改现有文档时，将此项更改为“update”。
示例代码
下面是一个示例代码段，显示如何将Storybook中的文档上传到Frontify：
-- -------------------- ---- -------
-------------- - -
-------- ---------------------------
------- -
-------------------------
------------------------------
-------------------------------------
--
------------- ----- -------- - ---------- -- -- -
--------------------
--- ---------------------
------------- -----------------------------
---------------------- ---------
------- -----------------------------
----------- ------------------------
------- ----------------------------
------------ ----------------------------------
---- ------------
--------- -----
--
--
------ -------
--
--这里是一个示例代码段，可以在React中将文档信息渲染成Markdown格式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- ----------------------
------ ------- - --------------- - ---- -----------
----- ------- - -- -- ------------------- ----------
----- ----------- - -- -- -
--
------- ------------------------- ---------------
---------------- ------------------
--------- ------
------------------
------- ----------------- ---------
-------- ------
---------
---------------- ----------------- ---------
-------- --------- ------
------------------
---
--
---------------- ----------- -- -- -
-------- --- ------ ------- -- --------- -- -- -
----- ---- - ------------------------------- --------------------------
-------------------------------
---
-------- --- --------------- ------- ---- --- --------- ---- -- --- -- ------ -- -- -
----- ---- - --------
--------------- ------------------- ----------------
----------
-------------------------------
---
----------- --- ------- ---- ------ --- -------- -- -- -
----- ------- - --------------------- -----------------
---------------------------------- ---------
---
------------ --- ------- -------- ---- --- ------ -- --------- -- -- -
----- ------ - ----------
----- ------- - --------------- ---------------------- -------------
------------------------------------
----------------------------------
---
---
------ ------- -
------ ---------
---------- -------
--
------ ----- ------- - -- -- ------------ ---总结
现在您已经安装了Story2frontify，了解了如何将Storybook中的各种文档信息集成到Frontify品牌管理控制台。 在您开始将Vue或React项目的产出推向Frontify之前，请确保仔细阅读并理解文档中的所有说明。 祝您成功！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6251ab1864dac6738a