diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..26d33521af10bcc7fd8cea344038eaaeb78d0ef5
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/.idea/docs.iml b/.idea/docs.iml
new file mode 100644
index 0000000000000000000000000000000000000000..d6ebd4805981b8400db3e3291c74a743fef9a824
--- /dev/null
+++ b/.idea/docs.iml
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
new file mode 100644
index 0000000000000000000000000000000000000000..87ea532768b38bd5204c0ec5698088effb68bc8a
--- /dev/null
+++ b/.idea/gradle.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000000000000000000000000000000000000..6049cfe013e0d2ef3f5f29c1b34b880e9d498ef0
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000000000000000000000000000000000000..35eb1ddfbbc029bcab630581847471d7f238ec53
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/zh-cn/third-party-components/npm-third-party-guide.md b/zh-cn/third-party-components/npm-third-party-guide.md
new file mode 100644
index 0000000000000000000000000000000000000000..6596f3aebb201deb9446959ec1f7c788b4900edc
--- /dev/null
+++ b/zh-cn/third-party-components/npm-third-party-guide.md
@@ -0,0 +1,55 @@
+# OpenHarmony JS/TS三方组件使用指导
+## OpenHarmony JS/TS三方组件介绍
+
+OpenHarmony JS/TS三方组件是以OpenHarmony npm包的形式,在传统的npm三方组件的基础上,定义了OpenHarmony npm共享包特定的工程结构和配置文件,支持OpenHarmony页面组件相关API、资源的调用。通过OpenHarmony npm包,您可以实现多个模块或者多个工程共享OpenHarmony页面、资源等相关代码。前往[npm官方文档](https://docs.npmjs.com/about-npm),您可以了解和掌握npm的基础功能和机制。
+
+
+
+## 查找OpenHarmony JS/TS三方组件
+
+a.关注Gitee官网OpenHarmony-TPC[三方组件资源汇总](https://gitee.com/openharmony-tpc/tpc_resource)项目,根据目录索引即可找到对应分类下的具体组件。
+
+
+
+b.访问[OpenHarmony官网](https://www.openharmony.cn/mainPlay/tpc),通过类型,分类,以及关键字搜索需要的三方组件。
+![official-website.png](official-website.png)
+
+
+
+## 安装并使用OpenHarmony JS/TS语言的三方组件
+
+在应用开发的过程中,JS/TS语言的三方组件,通常以源码或OpenHarmony npm包的方式被引入使用。您可以按照以下步骤将OpenHarmony npm包引入应用并使用,源码的具体引入及使用请参考各三方组件README.md指导介绍。
+
+1. 配置OpenHarmony npm环境,详情请参考安装教程 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md)。
+
+2. 在Terminal项目终端中,进入entry目录,并执行目标组件命令进行安装。具体的下载命令详见OpenHarmony官网该三方组件的“下载安装“模块。
+
+![npm-usage1.png](npm-usage1.png)
+
+ 以安装vcard三方组件为例,依赖包会存储在工程的node_modules目录下@ohos\vcard下。
+
+```
+npm install @ohos/vcard
+```
+
+![npm-usage2.png](npm-usage2.png)
+
+3. 下载完成后在项目文件下自动生成node_modules文件,下载的三方库就在node_modules文件夹下。
+
+![npm-usage3.png](npm-usage3.png)
+
+4. 在package.json中会自动添加如下依赖:
+
+```
+"dependencies": {
+ "@ohos/vcard": "^2.0.5"
+}
+```
+
+5. 在需要使用该组件的文件中导入组件。
+
+![npm-usage4.png](npm-usage4.png)
+
+6. 导入组件后直接使用方法即可。
+
+![npm-usage5.png](npm-usage5.png)
\ No newline at end of file
diff --git a/zh-cn/third-party-components/npm-usage1.png b/zh-cn/third-party-components/npm-usage1.png
new file mode 100644
index 0000000000000000000000000000000000000000..9dc9a72717182136e77d620c90e45669c4059043
Binary files /dev/null and b/zh-cn/third-party-components/npm-usage1.png differ
diff --git a/zh-cn/third-party-components/npm-usage2.png b/zh-cn/third-party-components/npm-usage2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce9e34ec18125ff473ad48667808081adc1a95d7
Binary files /dev/null and b/zh-cn/third-party-components/npm-usage2.png differ
diff --git a/zh-cn/third-party-components/npm-usage3.png b/zh-cn/third-party-components/npm-usage3.png
new file mode 100644
index 0000000000000000000000000000000000000000..66b6a14069cec3caaa42c0007f7b12ff09773f6f
Binary files /dev/null and b/zh-cn/third-party-components/npm-usage3.png differ
diff --git a/zh-cn/third-party-components/npm-usage4.png b/zh-cn/third-party-components/npm-usage4.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cd881a7ddf90aed5570411c943794829c2fa24d
Binary files /dev/null and b/zh-cn/third-party-components/npm-usage4.png differ
diff --git a/zh-cn/third-party-components/npm-usage5.png b/zh-cn/third-party-components/npm-usage5.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec7f772f86dad4deb5f061f6e7cf6ac41748a225
Binary files /dev/null and b/zh-cn/third-party-components/npm-usage5.png differ
diff --git a/zh-cn/third-party-components/official-website.png b/zh-cn/third-party-components/official-website.png
new file mode 100644
index 0000000000000000000000000000000000000000..9747ab1dde415ab0f438721cc428882520a231e2
Binary files /dev/null and b/zh-cn/third-party-components/official-website.png differ
diff --git a/zh-cn/third-party-components/third-party-components-introduction.md b/zh-cn/third-party-components/third-party-components-introduction.md
new file mode 100644
index 0000000000000000000000000000000000000000..17e06934e35a1e17ac5931b1ea6e057a2fbc7ec9
--- /dev/null
+++ b/zh-cn/third-party-components/third-party-components-introduction.md
@@ -0,0 +1,7 @@
+# OpenHarmony三方组件
+
+OpenHarmony三方组件,是经过验证可在OpenHarmony系统上可重复使用的软件组件,可帮助开发者快速开发OpenHarmony系统或应用。根据其开发语言分为了2种,一种是使用JavaScript或TypeScript语言的三方组件,通常以源码或OpenHarmony npm包的方式引入,在应用开发中使用。另一种是C/C++语言的三方组件,通常以源码或OpenHarmony hpm包的方式引入,在应用开发中以NAPI的方式使用,或直接编译在OpenHarmony操作系统镜像中。
+
+
+
+当前OpenHarmony提供了UI,动画,图片,多媒体,文件数据,网络,安全,工具,其他等类型的三方组件。
\ No newline at end of file