xiangjsoncraft 1.1.2 → 2.0.0

package/README.md

@@ -1,355 +1,458 @@
-# XiangJsonCraft
-![XiangJsonCraft Logo](https://picsum.photos/seed/xiangjsoncraft/200/200)
-
-XiangJsonCraft 是一个简单而强大的 JSON 配置与 HTML 页面渲染工具，由大学生董翔开发，专为前端开发者设计。通过简洁的 API，它允许你使用 JSON 配置文件来定义样式和内容，并将其应用到 HTML 页面中，实现动态页面的快速构建，做到样式、内容与代码的解耦管理。
-
-## 🚀 最新更新 (v1.1.1)
-基于 v1.1.0 核心功能完成**环境适配升级**，新增 CDN/本地双环境兼容能力，发布后可零成本实现本地开发、CDN 在线使用，同时优化渲染容错性，避免空配置、无效选择器导致的渲染异常。
-
-### 核心更新
-- **CDN/本地双环境适配**：自动识别运行环境，无需修改代码即可实现本地开发、CDN 在线调用
-- **渲染容错优化**：过滤空样式、无效选择器，新增样式块创建判空，控制台错误提示更友好
-- **打包格式完善**：提供 UMD/ES/CJS 三种打包格式，适配浏览器、前端框架、Node.js 全环境
-- **使用体验升级**：新增 npm dev 脚本，一键启动开发服务器，快速验证开发效果
-
-## ✨ 核心特性
-- **简单易用**：仅需一行 API 调用，即可完成整个页面的样式和内容渲染
-- **灵活配置**：通过单一 JSON 文件定义所有样式、文本、HTML 内容，支持按需修改
-- **轻量级无依赖**：原生 JavaScript 开发，无任何第三方依赖，体积小巧，加载速度快
-- **全面的 CSS 支持**：兼容所有 CSS 选择器（类、ID、伪类、伪元素、媒体查询等）
-- **响应式设计友好**：直接通过 JSON 配置媒体查询，轻松实现多屏幕尺寸适配
-- **双内容类型支持**：同时支持纯文本、HTML 片段动态注入，满足不同内容渲染需求
-- **多环境适配**：支持本地模块化引入、CDN 全局调用，适配所有现代浏览器
-- **高容错性**：自动过滤无效配置、空样式，避免单一配置错误导致整体渲染失败
-
-## 📦 安装使用
-### 1. npm 安装
+# XiangJsonCraft 2.0.0
+
+**Write JSON, Get a Website.** | 零CSS、零JS、纯JSON驱动的轻量前端框架
+
+一款从「JSON渲染工具」升级而来的完整前端微框架，无需编写任何CSS、JS代码，仅通过编辑JSON配置文件，即可快速构建美观、响应式、带交互的完整网页，大幅降低前端开发门槛，非前端开发者也能轻松上手。
+
+## 📢 重大升级说明（从 1.x → 2.0.0）
+
+XiangJsonCraft 2.0.0 是一次 **不兼容的重大版本升级** —— 从简单的「JSON渲染工具函数」，正式升级为「完整前端框架 + 官方脚手架」，保留1.x核心优势并全面强化，彻底改变使用方式、提升产品定位。
+
+### 🔄 新旧版本核心差异
+
+| 对比维度 | 1.x 版本（工具）                    | 2.0.0 版本（框架）                             |
+| -------- | ----------------------------------- | ---------------------------------------------- |
+| 产品定位 | JSON渲染工具函数                    | 纯JSON驱动前端框架                             |
+| 使用方式 | 手动创建HTML/JS，引入工具包调用函数 | 脚手架一键创建完整项目，仅改JSON               |
+| 核心能力 | 基础JSON样式+内容渲染               | 样式+内容+交互+响应式+脚手架全支持             |
+| 依赖管理 | 需手动引入、手动管理依赖            | 脚手架自动安装、自动引入，无需手动操作         |
+| 项目结构 | 无固定结构，需手动搭建              | 标准化项目结构，自动生成所有必要文件           |
+| 兼容性   | 仅支持模块化引入                    | 兼容模块化/非模块化环境，适配所有现代浏览器    |
+| 可维护性 | 需手动维护HTML/JS与JSON的关联       | HTML仅存骨架，所有配置集中在JSON，维护成本极低 |
+### ✅ 保留的1.x核心功能（全部继承并优化）
+
+- JSON与HTML解耦：HTML仅负责DOM骨架，样式、内容完全由JSON控制
+
+- CSS属性驼峰转短横线：支持驼峰命名（如boxSizing），自动转换为CSS标准写法（box-sizing）
+
+- 强容错性：过滤无效配置、空属性、不存在的选择器，单个错误不影响整体渲染
+
+- 内容渲染支持：同时支持纯文本渲染（防XSS）和HTML片段渲染，满足复杂内容需求
+
+- CSS全兼容：支持所有合法CSS选择器（类、ID、全局*）、伪类、属性，无额外学习成本
+
+- 轻量无依赖：核心代码仅百行级，打包后体积极小，不占用多余项目资源
+
+### 🔥 2.0.0 新增核心功能（框架级升级）
+
+- 官方脚手架：支持 `npm create xiangjsoncraft@latest` 一键创建项目，零手动配置
+
+- 多模板支持：内置「基础模板」「完整模板」「空模板」，适配不同使用场景（快速上手/复杂开发/自定义搭建）
+
+- 交互能力强化：支持在JSON中直接配置JS原生事件（如onclick），无需编写额外JS即可实现简单交互
+
+- 响应式优化：内置响应式示例配置，支持@media媒体查询，一键适配移动端/PC端
+
+- 标准化项目结构：自动生成index.html、config.json、package.json、README.md，规范开发流程
+
+- 自动依赖管理：脚手架自动安装框架依赖，自动完成框架引入，无需手动下载、引入文件
+
+- 友好控制台日志：区分信息、成功、错误日志，清晰提示配置加载状态、渲染结果和问题原因，便于排查
+
+- 全局变量暴露：兼容非模块化环境，CDN引入可直接全局调用，适配更多部署场景
+
+- 部署简化：无需打包，直接上传项目文件即可上线，降低部署门槛
+
+- 样式注入优化：样式块自动插入到head最前面，避免被其他样式覆盖，提升渲染稳定性
+
+## 🚀 快速开始（2.0.0 唯一使用方式）
+
+2.0.0 彻底废弃1.x的「手动引入工具包」用法，统一为脚手架一键创建，步骤极简：
+
+### 方式1：使用 npm create（推荐）
+
+```bash
+# 快速创建项目（默认项目名：xiangjsoncraft-app）
+npm create xiangjsoncraft@latest
+
+# 指定项目名称创建（推荐）
+npm create xiangjsoncraft@latest my-json-app
+```
+
+### 方式2：使用 npx 直接调用
+
+```bash
+# 直接创建项目
+npx create-xiangjsoncraft
+
+# 指定项目名称
+npx create-xiangjsoncraft my-json-app
+```
+
+### 方式3：全局安装后使用
+
 ```bash
-# npm
-npm install xiangjsoncraft --save
+# 全局安装脚手架
+npm install -g xiangjsoncraft
 
-# yarn
-yarn add xiangjsoncraft
+# 创建项目
+create-xiangjsoncraft my-json-app
+```
+
+### 项目启动步骤
 
-# pnpm
-pnpm add xiangjsoncraft
+```bash
+# 1. 进入项目目录（替换为你的项目名）
+cd my-json-app
+
+# 2. 启动开发服务器（脚手架已自动配置脚本）
+npm run start
+
+# 3. 访问页面
+# 打开浏览器访问 http://localhost:3000（默认端口，具体以终端提示为准）
 ```
 
-### 2. CDN 在线使用（零安装）
-无需本地安装，一行脚本引入即可全局调用，适合快速原型开发、静态页面使用：
-```html
-<!-- 引入UMD包，自动挂载全局变量 XiangJsonCraft -->
-<script src="https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/dist/xiangjsoncraft.umd.js"></script>
-<!-- 直接调用核心方法，零配置渲染 -->
-<script>
-  XiangJsonCraft.renderJsonStyles();
-</script>
+### 核心操作：自定义项目
+
+启动项目后，**无需修改任何HTML/JS文件**，仅需编辑项目根目录的 `config.json`，即可自定义所有样式、内容和交互，修改后刷新浏览器即可生效。
+
+## 📋 项目结构（2.0.0 标准化结构）
+
+脚手架创建的项目结构清晰，所有可配置内容集中在`config.json`，无需关注其他文件：
+
+```bash
+my-json-app/          # 你的项目根目录
+├─ index.html         # DOM骨架（固定不变，无需修改）
+├─ config.json        # 核心配置文件（样式+内容+交互，唯一需要编辑的文件）
+├─ package.json       # 项目配置（自动生成，可修改脚本/依赖）
+└─ README.md          # 项目说明（自动生成，含使用指南）
+```
+
+### 各文件说明
+
+- `index.html`：仅包含DOM骨架，定义页面基础结构（如容器、标题、按钮），选择器与config.json严格对应，无需修改
+
+- `config.json`：框架核心配置文件，包含styles（样式）、content（内容）两个核心节点，所有自定义都在这里完成
+
+- `package.json`：自动生成项目配置，包含启动脚本（npm run start）和框架依赖，可根据需求修改
+
+- `README.md`：自动生成项目使用指南，包含启动命令、配置说明，便于团队协作和后续维护
+
+## ⚙️ 核心配置详解（config.json）
+
+config.json 是框架的核心，包含 `styles`（样式配置）和 `content`（内容配置）两个必填节点，语法遵循标准JSON规范（推荐用 [JSON.cn](https://www.json.cn/) 校验语法）。
+
+### 1. 整体配置结构
+
+```json
+{
+  "framework": "XiangJsonCraft 2.0",  // 框架标识（可选，仅用于识别）
+  "styles": { /* 样式配置（核心） */ },  // 所有CSS样式都在这里配置
+  "content": { /* 内容配置（核心） */ }  // 所有页面内容都在这里配置
+}
+```
+
+### 2. styles 节点（样式配置）
+
+用于定义所有页面CSS样式，完全兼容CSS语法，支持所有合法选择器和属性，仅需用JSON格式编写即可。
+
+#### 核心规则
+
+- 键（key）：CSS选择器（支持类、ID、全局*、伪类、媒体查询，如 `.app-title`、`#btn`、`.box:hover`、`@media (max-width: 768px)`）
+
+- 值（value）：样式对象，键为CSS属性（支持驼峰命名），值为CSS属性值
+
+- 容错机制：空选择器、非对象样式、空属性、无效属性值会被自动过滤，不影响整体渲染
+
+- 驼峰转换：属性名支持驼峰（如fontSize、backgroundColor），框架会自动转换为CSS标准短横线写法（font-size、background-color）
+
+#### 示例配置
+
+```json
+"styles": {
+  "*": {  // 全局样式（所有元素生效）
+    "margin": 0,
+    "padding": 0,
+    "boxSizing": "border-box",  // 驼峰命名，自动转为box-sizing
+    "fontFamily": "Segoe UI, Roboto, 微软雅黑, sans-serif"
+  },
+  "body": {  // body标签样式
+    "backgroundColor": "#f0f4f8",
+    "color": "#334e68",
+    "lineHeight": "1.6",
+    "minHeight": "100vh"
+  },
+  ".app-title": {  // 类选择器样式
+    "fontSize": "2rem",
+    "color": "#2d3748",
+    "textAlign": "center",
+    "marginBottom": "1.5rem",
+    "transition": "color 0.3s ease"
+  },
+  ".app-title:hover": {  // 伪类样式
+    "color": "#4299e1"
+  },
+  "@media (max-width: 768px)": {  // 响应式样式（移动端适配）
+    ".app-title": {
+      "fontSize": "1.8rem"
+    }
+  }
+}
+```
+
+### 3. content 节点（内容配置）
+
+用于向HTML中的DOM节点注入文本或HTML内容，键为与HTML对应的选择器，值为内容配置对象，支持纯文本和HTML两种渲染方式。
+
+#### 内容配置对象属性
+
+| 属性名 | 类型     | 是否必选 | 默认值 | 说明                                                                   |
+| ------ | -------- | -------- | ------ | ---------------------------------------------------------------------- |
+| value  | 任意类型 | 是       | -      | 要注入的文本或HTML内容，框架会自动转为字符串处理                       |
+| isHtml | Boolean  | 否       | false  | true：以HTML格式渲染（支持标签和JS事件）；false：以纯文本渲染（防XSS） |
+#### 示例配置
+
+```json
+"content": {
+  ".app-title": {  // 对应HTML中的 <h1 class="app-title"></h1>
+    "value": "XiangJsonCraft 2.0 示例",
+    "isHtml": false  // 纯文本渲染
+  },
+  ".app-desc": {  // 对应HTML中的 <p class="app-desc"></p>
+    "value": "仅修改config.json，即可实现全页面自定义！",
+    "isHtml": false
+  },
+  ".app-btn": {  // 对应HTML中的 <a class="app-btn"></a>
+    "value": "<span onclick=\"alert('点击成功！')\">点击我</span>",
+    "isHtml": true  // HTML渲染，支持JS事件
+  }
+}
 ```
 
-## ⚡ 快速开始
-### 步骤1：创建 JSON 配置文件
-在项目根目录/HTML 同级目录创建 `config.json`，定义页面的样式、文本及 HTML 内容，支持所有 CSS 选择器和媒体查询：
+## 📌 完整配置示例（config.json）
+
 ```json
 {
+  "framework": "XiangJsonCraft 2.0",
   "styles": {
     "*": {
-      "margin": "0",
-      "padding": "0",
-      "boxSizing": "border-box"
+      "margin": 0,
+      "padding": 0,
+      "boxSizing": "border-box",
+      "fontFamily": "Segoe UI, Roboto, 微软雅黑, sans-serif"
     },
     "body": {
-      "fontFamily": "Arial, sans-serif",
+      "backgroundColor": "#f0f4f8",
+      "color": "#334e68",
       "lineHeight": "1.6",
-      "color": "#333",
-      "backgroundColor": "#f9f9f9",
-      "padding": "2rem"
+      "minHeight": "100vh",
+      "padding": "2rem 1rem"
+    },
+    ".app-container": {
+      "maxWidth": "1200px",
+      "margin": "0 auto",
+      "backgroundColor": "#ffffff",
+      "padding": "2rem",
+      "borderRadius": "12px",
+      "boxShadow": "0 4px 20px rgba(0,0,0,0.05)",
+      "transition": "all 0.3s ease"
+    },
+    ".app-container:hover": {
+      "boxShadow": "0 8px 30px rgba(0,0,0,0.1)"
     },
-    ".header": {
-      "backgroundColor": "#2c3e50",
-      "color": "white",
-      "padding": "1.5rem",
+    ".app-title": {
+      "fontSize": "2.2rem",
+      "color": "#2d3748",
       "textAlign": "center",
-      "borderRadius": "8px",
-      "marginBottom": "2rem"
+      "marginBottom": "1.5rem",
+      "transition": "color 0.3s ease"
+    },
+    ".app-title:hover": {
+      "color": "#4299e1"
+    },
+    ".app-desc": {
+      "fontSize": "1.1rem",
+      "marginBottom": "2rem",
+      "textAlign": "center",
+      "maxWidth": "600px",
+      "marginLeft": "auto",
+      "marginRight": "auto"
     },
-    "nav ul": {
+    ".app-btn-group": {
       "display": "flex",
-      "listStyle": "none",
       "justifyContent": "center",
-      "gap": "1.5rem",
-      "marginBottom": "2rem"
+      "gap": "1rem",
+      "flexWrap": "wrap"
     },
-    "nav a": {
-      "color": "#2c3e50",
+    ".app-btn": {
+      "display": "inline-block",
+      "padding": "12px 24px",
+      "backgroundColor": "#4299e1",
+      "color": "#ffffff",
+      "borderRadius": "8px",
       "textDecoration": "none",
-      "fontSize": "1.1rem"
+      "cursor": "pointer",
+      "transition": "all 0.3s ease"
     },
-    "nav a:hover": {
-      "color": "#f39c12",
-      "textDecoration": "underline"
+    ".app-btn:hover": {
+      "backgroundColor": "#3182ce",
+      "transform": "translateY(-2px)"
     },
-    ".card": {
-      "background": "white",
-      "padding": "2rem",
-      "borderRadius": "8px",
-      "boxShadow": "0 2px 8px rgba(0,0,0,0.1)"
+    ".app-btn-secondary": {
+      "backgroundColor": "#718096"
+    },
+    ".app-btn-secondary:hover": {
+      "backgroundColor": "#4a5568"
     },
     "@media (max-width: 768px)": {
-      "body": {
-        "padding": "1rem"
+      ".app-container": {
+        "padding": "1rem",
+        "margin": "0 0.5rem"
       },
-      "nav ul": {
+      ".app-title": {
+        "fontSize": "1.8rem"
+      },
+      ".app-btn-group": {
         "flexDirection": "column",
-        "alignItems": "center",
-        "gap": "1rem"
+        "alignItems": "center"
       }
     }
   },
   "content": {
-    ".header h1": {
-      "value": "XiangJsonCraft 演示页面",
+    ".app-title": {
+      "value": "XiangJsonCraft 2.0 完整示例",
+      "isHtml": false
+    },
+    ".app-desc": {
+      "value": "纯JSON驱动的前端框架，无需写CSS/JS，修改JSON即可完成所有开发！",
       "isHtml": false
     },
-    ".card h2": {
-      "value": "<span style='color:#2c3e50;'>JSON 配置渲染</span> 就是这么简单",
+    ".app-btn": {
+      "value": "<span onclick=\"alert('主按钮被点击！')\">主按钮</span>",
       "isHtml": true
     },
-    ".card p": {
-      "value": "通过单个 JSON 文件定义所有样式和内容，一行代码完成页面渲染，实现代码与配置的解耦管理。",
-      "isHtml": false
+    ".app-btn-secondary": {
+      "value": "<span onclick=\"alert('次按钮被点击！')\">次按钮</span>",
+      "isHtml": true
     }
   }
 }
 ```
 
-### 步骤2：创建 HTML 页面
-创建 `index.html`，引入渲染容器并调用核心 API，无需手写任何 CSS 样式：
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>XiangJsonCraft 快速开始</title>
-    <!-- 动态样式块，渲染后的CSS会注入到这里 -->
-    <style id="dynamic-styles"></style>
-</head>
-<body>
-    <!-- 页面渲染容器，与config.json中的选择器匹配 -->
-    <header class="header">
-        <h1></h1>
-    </header>
-    <nav>
-        <ul>
-            <li><a href="#">首页</a></li>
-            <li><a href="#">文档</a></li>
-            <li><a href="#">示例</a></li>
-        </ul>
-    </nav>
-    <div class="card">
-        <h2></h2>
-        <p></p>
-    </div>
-
-    <!-- 方式1：本地模块化引入（推荐，适合项目开发） -->
-    <script type="module">
-        import { renderJsonStyles } from './renderJson.js';
-        // 一行调用，完成所有样式和内容渲染
-        renderJsonStyles();
-    </script>
-
-    <!-- 方式2：CDN全局调用（注释方式1，打开此注释即可） -->
-    <!-- <script src="https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/dist/xiangjsoncraft.umd.js"></script>
-    <script>
-        XiangJsonCraft.renderJsonStyles();
-    </script> -->
-</body>
-</html>
+## 🔧 常见问题排查
+
+### 1. 控制台报 404 错误：无法加载 config.json
+
+- 原因：未使用本地服务器打开页面，浏览器跨域策略阻止加载本地JSON文件（直接双击HTML文件会触发此问题）
+
+- 解决：使用 VS Code Live Server、Node.js Express 等本地服务器打开项目，确保JSON文件可通过服务器访问
+
+### 2. 样式未渲染 / 内容未注入
+
+- 检查选择器：HTML中的DOM选择器与config.json中的键必须**严格一致**（区分大小写、类名前缀`.`、ID前缀`#`）
+
+- 检查JSON语法：确保config.json无语法错误（如缺少引号、大括号、逗号结尾），可通过JSON.cn校验
+
+- 检查日志：查看浏览器控制台日志，确认框架是否渲染成功、配置是否被正确加载
+
+### 3. 依赖安装失败
+
+- 原因：网络问题、npm镜像问题，或本地npm版本过低
+
+- 解决：手动进入项目目录，执行`npm install` 重新安装；或切换npm镜像（如`npm config set registry https://registry.npm.taobao.org`）
+
+### 4. 控制台报错：prop.replaceCamelCase is not a function
+
+- 原因：styles节点中存在非字符串类型的属性名（如数字、null、数组）
+
+- 解决：校验config.json，确保styles节点下所有属性名均为双引号包裹的字符串，删除无效属性
+
+### 5. 浏览器报 favicon.ico 404
+
+- 原因：浏览器默认在项目根目录查找网站小图标，未找到则报404（不影响项目功能）
+
+- 解决：下载favicon.ico图标放到项目根目录，或在HTML的<head>中通过<link rel="icon">指定PNG/SVG图标
+
+## 📦 框架开发与打包（开发者指南）
+
+若你需要修改框架核心逻辑、二次开发，可按照以下步骤操作：
+
+### 1. 克隆源码
+
+```bash
+git clone https://github.com/dxiangwiki/xiangjsoncraft.git
+cd xiangjsoncraft
 ```
 
-### 步骤3：开发运行
+### 2. 安装开发依赖
+
 ```bash
-# 安装开发依赖（首次使用）
 npm install
+```
 
-# 打包生成多格式文件（UMD/ES/CJS）
-npm run build
+### 3. 修改核心逻辑
 
-# 启动开发服务器，一键预览效果
-npm run dev
-```
-在浏览器中访问 `http://localhost:3000`，即可看到由 JSON 配置渲染的完整页面。
-
-## 📚 API 文档
-### `renderJsonStyles()`
-**核心渲染方法**，无入参，执行后自动完成以下操作：
-1. 自动识别运行环境（本地/CDN），加载对应路径的 `config.json` 配置文件
-2. 解析配置中的 `styles` 节点，生成标准 CSS 样式并注入到页面头部的 `#dynamic-styles` 样式块
-3. 解析配置中的 `content` 节点，根据 `isHtml` 标识，向匹配的 DOM 节点注入纯文本/HTML 内容
-4. 控制台输出渲染成功提示，若配置异常则输出友好的错误信息
-
-#### 调用方式
-```javascript
-// 方式1：ES6模块化引入（本地开发/前端框架）
-import { renderJsonStyles } from 'xiangjsoncraft';
-renderJsonStyles();
-
-// 方式2：CDN全局调用（静态页面/快速开发）
-XiangJsonCraft.renderJsonStyles();
+- 框架核心渲染逻辑：`src/renderJson.js`
+
+- 脚手架逻辑：`bin/create.js`
+
+- 项目模板：`template/` 目录下的所有文件
+
+- 打包配置：`rollup.config.js`
+
+### 4. 打包框架核心
+
+```bash
+npm run build
 ```
 
-## ⚙️ 配置文件说明
-配置文件为标准 JSON 格式，核心包含 `styles` 和 `content` 两个一级节点，所有配置均支持按需扩展、修改。
+打包后会在 `dist/` 目录生成 `xiangjsoncraft.umd.js`（UMD格式，兼容模块化/非模块化环境）。
 
-### 1. `styles` 节点
-用于定义页面所有 CSS 样式，**键为任意合法 CSS 选择器**，值为样式属性对象，样式属性支持**驼峰式命名**（会自动转换为 CSS 标准短横线命名）。
-- 支持选择器：类、ID、标签、伪类、伪元素、后代选择器、媒体查询等所有 CSS 合法选择器
-- 样式属性：所有 CSS 原生属性，驼峰式（`fontSize`）会自动转为短横线式（`font-size`）
+### 5. 本地测试
 
-### 2. `content` 节点
-用于定义页面文本/HTML 内容，**键为 CSS 选择器**，值为内容配置对象，包含两个必选属性：
-- `value`：字符串类型，要渲染的内容（纯文本/HTML 片段）
-- `isHtml`：布尔类型，`true` 表示内容为 HTML 片段，`false` 表示内容为纯文本（默认）
+打包后，将`dist/xiangjsoncraft.umd.js` 与 `template/` 目录下的文件放在一起，通过本地服务器测试渲染效果。
 
-### 配置文件规范
-1. 配置文件必须命名为 `config.json`，与 HTML 页面同级目录（CDN 方式无需手动创建，自动加载官方配置）
-2. 选择器必须匹配 HTML 中的实际 DOM 节点，否则会被自动过滤
-3. 样式属性值需符合 CSS 规范（如单位、颜色值、尺寸值）
-4. HTML 片段需保证语法合法，避免 XSS 风险（建议仅在可信环境下使用 HTML 内容）
+## 📤 发包步骤（2.0.0 正式发布）
 
-## 🎨 配置示例
-### 完整配置示例
-```json
-{
-  "styles": {
-    // 通配符选择器
-    "*": {
-      "margin": "0",
-      "padding": "0",
-      "boxSizing": "border-box"
-    },
-    // 标签选择器
-    "body": {
-      "fontFamily": "Microsoft YaHei, sans-serif",
-      "lineHeight": "1.8",
-      "color": "#333",
-      "backgroundColor": "#f5f5f5"
-    },
-    // ID选择器
-    "#app": {
-      "maxWidth": "1200px",
-      "margin": "0 auto",
-      "padding": "2rem"
-    },
-    // 类选择器
-    ".btn": {
-      "padding": "0.8rem 1.5rem",
-      "border": "none",
-      "borderRadius": "4px",
-      "cursor": "pointer",
-      "fontSize": "1rem"
-    },
-    // 伪类选择器
-    ".btn-primary": {
-      "backgroundColor": "#3498db",
-      "color": "white"
-    },
-    ".btn-primary:hover": {
-      "backgroundColor": "#2980b9"
-    },
-    // 媒体查询
-    "@media (max-width: 768px)": {
-      "#app": {
-        "padding": "1rem"
-      },
-      ".btn": {
-        "width": "100%",
-        "marginBottom": "1rem"
-      }
-    }
-  },
-  "content": {
-    // 纯文本内容
-    "#app h1": {
-      "value": "XiangJsonCraft 配置示例",
-      "isHtml": false
-    },
-    // HTML 片段内容
-    ".desc": {
-      "value": "支持 <strong>HTML 片段</strong> 和 <em>纯文本</em> 两种渲染方式",
-      "isHtml": true
-    }
-  }
-}
+```bash
+# 1. 安装依赖（确保所有依赖已安装）
+npm install
+
+# 2. 打包框架核心（生成dist目录）
+npm run build
+
+# 3. 登录NPM（确保已注册NPM账号，且拥有包发布权限）
+npm login
+
+# 4. 发布2.0.0版本（--access public 确保公开可访问）
+npm publish --access public
 ```
 
-## 🥚 彩蛋：工具背后的小插曲
-### “敢改包”的底气来源
+## 📜 版本更新日志
 
-其实XiangJsonCraft的诞生，还藏着一段有趣的小场景——
+### v2.0.0（最新稳定版 | 重大升级）
 
-某天，朋友在Vue项目里用这个包时，遇到了个不符合自己编程习惯的小细节，对着node_modules里的代码犯愁：“老师说这地方不能随便改，容易牵一发而动全身。”
+- 定位升级：从「JSON渲染工具」升级为「纯JSON驱动的轻量前端框架」，版本号直接跳至2.0.0，不兼容1.x版本
 
-我当时笑着回了句：“没事，改不坏。”朋友反问：“你怎么这么自信？难道你会用？”
+- 新增功能：官方脚手架、多模板支持、自动依赖管理、友好控制台日志、全局变量暴露、部署简化
 
-我故意顿了顿，笑着说：“哼？我会吗……”
+- 能力强化：交互支持优化、响应式示例完善、样式注入优化、容错机制升级
 
-其实不是“会用”，是“会造”——整个包的每一行代码，都是我从0到1敲出来的。哪里是样式配置的核心逻辑，哪部分是内容渲染的关键节点，甚至每个变量命名的小心思，早就刻在脑子里了。
+- 体验优化：标准化项目结构、自动生成使用文档、清晰的控制台提示、简化开发流程
 
-对别人来说，改node_modules是“碰别人的代码”；但对我来说，改的是“自己写的工具”。知道怎么调整既不破坏核心功能，又能贴合朋友的习惯，这份底气，其实来自“开发者”这个身份最本质的掌控感。
+- 继承保留：1.x版本的核心渲染能力、驼峰转短横线、强容错性、CSS全兼容等优势
 
-所以如果你用的时候也有小想法，不用怕“改坏”——工具本身就为“灵活适配”留足了空间，而作为作者，我也始终在背后，为它的稳定和好用托底。
+### v1.1.1 ~ v1.2.0（工具版本）
 
-## 🌐 浏览器兼容性
-支持所有现代浏览器，无需额外引入 polyfill：
-- Chrome ≥ 61
-- Firefox ≥ 60
-- Edge ≥ 79
-- Safari ≥ 12.1
-- Opera ≥ 48
-- 移动端所有现代浏览器（微信浏览器、QQ浏览器、Safari 移动端等）
+- v1.2.0：优化本地/CDN配置加载优先级，新增容错机制，完善控制台日志，支持SVG/PNG网站小图标
 
-## 🤝 贡献指南
-XiangJsonCraft 欢迎所有开发者的贡献和建议，如果你有以下想法，欢迎随时交流：
-- 新增功能需求
-- 性能优化建议
-- Bug 修复
-- 文档完善
+- v1.1.1：首次正式发布，实现核心JSON样式+内容渲染，支持驼峰转短横线、CDN/本地引入，基本容错机制
 
-**贡献方式**：通过邮箱联系作者，提供你的想法、代码或问题描述，作者会第一时间回复。
+## ⚖️ 开源协议
 
-## 📄 许可证
-本项目基于 **MIT 开源许可证** 发布，你可以自由使用、修改、分发本项目，无需支付任何费用，只需保留版权声明。
+MIT License - 详见项目根目录 `LICENSE` 文件，可自由使用、修改、分发，无需授权，仅需保留开源协议声明。
 
-```
-MIT License
-Copyright (c) 2025 董翔
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-```
+## 🔗 官方地址
+
+- NPM：[https://www.npmjs.com/package/xiangjsoncraft](https://www.npmjs.com/package/xiangjsoncraft)
+
+- Github：[https://github.com/dxiangwiki/xiangjsoncraft](https://github.com/dxiangwiki/xiangjsoncraft)
+
+## 💬 问题反馈
 
-## 📞 联系我们
-如果你有任何问题、建议或合作想法，欢迎通过以下方式联系作者：
-- **Email**：3631247406@qq.com
-- **作者**：董翔
+若使用过程中遇到问题、有功能建议，可在GitHub仓库提交Issue，或通过NPM包主页留言，会及时响应并修复。
 
----
+## ✨ 框架口号
 
-**感谢使用 XiangJsonCraft！**  
-愿这个小工具能让你的前端开发更高效、更轻松 🚀
+**Write JSON, Get a Website.** | 只写 JSON，就能得到一个完整网站。
+> （注：文档部分内容可能由 AI 生成）