chore: 更新版本号至0.1.4并更新前端框架集成文档
- 将主项目及所有子模块的package.json版本号从0.1.4-rc-2更新为正式版0.1.4 - 重写前端配置指南,为Vue3、Vue2和React提供清晰的模块化集成示例 - 移除旧的Vue单文件组件封装示例,推荐使用npm包直接导入的方式
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cwd-admin",
|
||||
"version": "0.1.4-rc-2",
|
||||
"version": "0.1.4",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cwd-api",
|
||||
"version": "0.1.4-rc-2",
|
||||
"version": "0.1.4",
|
||||
"scripts": {
|
||||
"deploy": "node scripts/index.js && wrangler deploy",
|
||||
"dev": "wrangler dev",
|
||||
|
||||
@@ -165,48 +165,77 @@ comments.updateConfig({
|
||||
</script>
|
||||
```
|
||||
|
||||
### Vue
|
||||
### Vue3
|
||||
|
||||
在 Vue 单文件组件里封装。
|
||||
|
||||
`CommentsWidget.vue`:
|
||||
安装 `npm i cwd-widget`
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div ref="comments"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue';
|
||||
|
||||
const comments = ref(null);
|
||||
let instance = null;
|
||||
|
||||
onMounted(async () => {
|
||||
if (!window.CWDComments) {
|
||||
await loadScript('https://unpkg.com/cwd-widget@0.0.x/dist/cwd.js');
|
||||
}
|
||||
|
||||
instance = new window.CWDComments({
|
||||
el: comments.value,
|
||||
apiBaseUrl: 'https://your-api.example.com', // 换成你的 API 地址
|
||||
});
|
||||
instance.mount();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
instance = null;
|
||||
});
|
||||
|
||||
function loadScript(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = src;
|
||||
script.async = true;
|
||||
script.onload = () => resolve();
|
||||
script.onerror = (e) => reject(e);
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<div id="comments"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
import CWDComments from "cwd-widget";
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化评论组件
|
||||
const comments = new CWDComments({
|
||||
el: '#comments',
|
||||
apiBaseUrl: 'https://your-api.example.com',
|
||||
});
|
||||
comments.mount();
|
||||
});
|
||||
```
|
||||
|
||||
### Vue2
|
||||
|
||||
安装 `npm i cwd-widget`
|
||||
|
||||
```html
|
||||
<div id="comments"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
import CWDComments from "cwd-widget";
|
||||
|
||||
// 放在 mounted 钩子中初始化评论组件
|
||||
mounted() {
|
||||
const comments = new CWDComments({
|
||||
el: "#comments",
|
||||
apiBaseUrl: "https://your-api.example.com",
|
||||
});
|
||||
comments.mount();
|
||||
},
|
||||
```
|
||||
|
||||
### React
|
||||
|
||||
安装 `npm i cwd-widget`
|
||||
|
||||
```js
|
||||
import { useEffect, useRef } from "react";
|
||||
import CWDComments, { CWDCommentsConfig } from "cwd-widget";
|
||||
|
||||
function Comments() {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const config: CWDCommentsConfig = {
|
||||
el: containerRef.current,
|
||||
apiBaseUrl: "https://your-api.example.com",
|
||||
};
|
||||
|
||||
const comments = new CWDComments(config);
|
||||
comments.mount();
|
||||
|
||||
return () => {
|
||||
comments.unmount();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div id="comments" ref={containerRef} />;
|
||||
}
|
||||
|
||||
export default Comments;
|
||||
```
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cwd-widget",
|
||||
"version": "0.1.4-rc-2",
|
||||
"version": "0.1.4",
|
||||
"description": "Server-free, extremely fast and secure, plug-and-play commenting system based on Cloudflare Workers and the Global Edge Network.",
|
||||
"type": "module",
|
||||
"author": "anghunk",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cwd",
|
||||
"version": "0.1.4-rc-2",
|
||||
"version": "0.1.4",
|
||||
"license": "Apache-2.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
Reference in New Issue
Block a user