@tencentcloud/chat-uikit-vue - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "@tencentcloud/chat-uikit-vue",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "dependencies": {
@@ -5,0 +5,0 @@ "@vueuse/core": "^8.2.6",

readme.md

@@ -1,2 +0,17 @@
-## 开发环境要求
+## 关于腾讯云即时通信 IM
+
+腾讯云即时通信（Instant Messaging，IM）基于 QQ 底层 IM 能力开发，仅需植入 SDK 即可轻松集成聊天、会话、群组、资料管理能力，帮助您实现文字、图片、短语音、短视频等富媒体消息收发，全面满足通信需要。
+
+## 关于 chat-uikit-vue
+
+chat-uikit-vue 是基于腾讯云 Web IM SDK 的一款 VUE UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、关系链、群组、音视频通话等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
+chat-uikit-vue 中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 chat-uikit-vue 时只需关注自身业务或个性化扩展即可。
+chat-uikit-vue Web 端 和 H5 端界面效果如下图所示：
+<img src="https://qcloudimg.tencent-cloud.cn/raw/9b8696a6e0e424dc3862592985c00d1a.png" style="zoom:25%;"/>
+<img src="https://qcloudimg.tencent-cloud.cn/raw/6c9214a990a3ed8a2055bcab60fe5c3d.png" style="zoom:51%;"/>
+
+## 发送您的第一条消息
+
+### 开发环境要求
+
 -  Vue 3
@@ -6,12 +21,17 @@ -  TypeScript
 -  node（12.13.0 <= node版本 <= 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
--  npm（建版本请与 node 版本匹配）
+-  npm（版本请与 node 版本匹配）
 
-## TUIKit 源码集成
-### 步骤1：创建项目
+### TUIKit 源码集成
+
+#### 步骤1：创建项目
+
 推荐使用 vue-cli 方式创建项目， 配置 Vue3 + TypeScript + sass。
 如果您尚未安装 vue-cli ，可以在 terminal 或 cmd 中采用如下方式进行安装：
+
 ```javascript
 npm install -g @vue/cli@4.5.0 sass sass-loader@10.1.1
 ```
+
 通过 vue-cli 创建项目，并选择下图中所选配置项。
+
 ```javascript
@@ -21,6 +41,9 @@ vue create chat-example
 ```
+
 <img style="width:800px; max-width: inherit;" src="https://qcloudimg.tencent-cloud.cn/raw/ac877020ff69dbb11ea9dd9e7ee865a7.jpg"/> 
 
-### 步骤2：下载 TUIKit 组件
-通过  [npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue) 方式下载 TUIKit 组件并复制到自己工程的 src 目录下：
+#### 步骤2：下载 TUIKit 组件
+
+通过  [npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue) 方式下载 TUIKit 组件，为了方便您后续的拓展，建议您将 TUIKit 组件复制到自己工程的 src 目录下：
+
 ```javascript
@@ -30,8 +53,10 @@ npm i @tencentcloud/chat-uikit-vue
 ```
-成功后目录结构如图所示：
 
-<img style="width:300px; max-width: inherit;" src="https://qcloudimg.tencent-cloud.cn/raw/943a9b0a8bffb0e21c41a0e148228e05.png"/> 
+成功后目录结构如图所示：      
+<img width="300" src="https://qcloudimg.tencent-cloud.cn/raw/ced7ede80ab9d24b28787dd80182da7f.png"/>
 
-### 步骤3：引入 TUIKit 组件
+#### 步骤3：引入 TUIKit 组件
+
 在 main.ts 中，引入 TUIKit，并注册到 Vue 项目实例中：
+
 ```javascript
@@ -66,17 +91,14 @@ import { createApp } from 'vue';
 
+#### 步骤4： 获取 SDKAppID 、密钥与 userID
 
-
-### 步骤4： 生成 UserSig
 设置 main.ts 文件示例代码中的相关参数 SDKAppID、secretKey 以及 userID ，其中  SDKAppID 和密钥等信息，可通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im)  获取，单击目标应用卡片，进入应用的基础配置页面。例如：
 <img style="width:600px; max-width: inherit;" src="https://qcloudimg.tencent-cloud.cn/raw/480455e5b4a2a1d4d67ffb2e445452a6.png"/>
-userID 信息，可通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im)  进行获取或创建，单击目标应用卡片，进入应用的账号管理页面，即可获取或创建账号以及对应的 userID。例如：
+userID 信息，可通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im)  进行创建和获取，单击目标应用卡片，进入应用的账号管理页面，即可创建账号并获取 userID。例如：
 <img style="width:870px; max-width: inherit;" src="https://qcloudimg.tencent-cloud.cn/raw/c6e76f750f11023d13b01ba8c2279a0e.png"/>
->!
-> 
-> 本文提到的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。
 
+#### 步骤5：调用 TUIKit 组件
 
-### 步骤5：调用 TUIKit 组件
 在需要展示的页面，调用 TUIKit 的组件即可使用。
 例如：在 App.vue 页面中，使用 TUIConversation、TUIChat、TUISearch 快速搭建聊天界面。
+
 ```javascript
@@ -146,3 +168,3 @@ <template>
 
-### 步骤6：启动项目
+#### 步骤6：启动项目  
 ```javascript
@@ -152,10 +174,23 @@ npm run serve
 
-## 常见问题
-### 1. 如何生成 UserSig？
+#### 步骤7：发送您的第一条消息    
+<img src="https://qcloudimg.tencent-cloud.cn/raw/340d81cc1db6323d395bd23b647dbd43.png"/>
 
-UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。
+### 常见问题
+#### 1. 什么是 UserSig？
 
-### 2. Component name "XXXX" should always be multi-word
+UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。 
+
+#### 2. 如何生成 UserSig？
+
+ UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。
+
+> !
+>
+> 本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见上文。
+
+#### 3. Component name "XXXX" should always be multi-word
+
 -  IM TUIKit web 所使用的 ESLint 版本为 v6.7.2 ，对于模块名的驼峰式格式并不进行严格校验
 -  如果您出现此问题，您可以在 .eslintrc.js文件中进行如下配置：
+
 ```javascript
@@ -169,7 +204,2 @@ module.exports = {
 };
-```
-
-
-
-
-
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

823283

increased by0.15%

Number of lines in readme file

198

increased by17.16%

No dependency changes