使用 Vue 实现 JSON 在线格式化

目录

• 简介
• 项目初始化
• 实现 JSON 格式化功能
• 添加代码高亮与美化
• 完善用户交互
• 完整示例代码
• 小结
• 参考资料

简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，在前端和后端开发中被广泛使用。然而，手写或调试 JSON 时，可能会遇到格式混乱或难以阅读的问题。因此，开发一个JSON 在线格式化工具能提高开发效率。

本文将使用 Vue 3 + Vue Composition API 来实现一个简单的 JSON 在线格式化工具，支持：

1. 输入 JSON 字符串，格式化并高亮显示。
2. 处理 JSON 解析错误，给出错误提示。
3. 复制格式化后的 JSON 方便使用。

---

项目初始化

首先，使用 Vite 创建一个 Vue 3 项目：

npm create vite@latest json-formatter --template vue
cd json-formatter
npm install
npm run dev

在 src/components/JsonFormatter.vue 创建组件，代码结构如下：

src/├── components/│   ├── JsonFormatter.vue├── App.vue├── main.js

---

实现 JSON 格式化功能

在 JsonFormatter.vue 中，使用 Vue 处理 JSON 格式化逻辑。

<template><div class="json-formatter"><h2>JSON 在线格式化工具</h2><textarea v-model="jsonInput" placeholder="请输入 JSON 数据"></textarea><button @click="formatJson">格式化</button><button @click="clearJson">清空</button><pre v-if="jsonOutput" class="json-output">{{ jsonOutput }}</pre><p v-if="error" class="error">{{ error }}</p></div>
</template><script setup>
import { ref } from 'vue';const jsonInput = ref('');
const jsonOutput = ref('');
const error = ref('');const formatJson = () => {try {jsonOutput.value = JSON.stringify(JSON.parse(jsonInput.value), null, 2);error.value = '';} catch (err) {error.value = 'JSON 格式错误，请检查输入！';}
};const clearJson = () => {jsonInput.value = '';jsonOutput.value = '';error.value = '';
};
</script><style scoped>
.json-formatter {max-width: 600px;margin: auto;text-align: center;
}
textarea {width: 100%;height: 150px;padding: 8px;font-size: 14px;
}
button {margin: 10px;padding: 8px 12px;cursor: pointer;
}
.json-output {background: #f4f4f4;padding: 10px;white-space: pre-wrap;text-align: left;
}
.error {color: red;
}
</style>

解析说明：

• jsonInput 绑定用户输入内容。
• formatJson 解析 JSON，并使用 JSON.stringify 格式化输出。
• clearJson 清空所有内容。
• 如果 JSON 解析失败，显示错误信息。

---

添加代码高亮与美化

使用 prismjs 为格式化后的 JSON 添加语法高亮。

安装 prismjs

npm install prismjs

引入 Prism.js 并应用样式

在 JsonFormatter.vue 组件中：

<script setup>
import { ref, watch } from 'vue';
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';const jsonInput = ref('');
const jsonOutput = ref('');
const error = ref('');const formatJson = () => {try {jsonOutput.value = JSON.stringify(JSON.parse(jsonInput.value), null, 2);error.value = '';highlightJson();} catch (err) {error.value = 'JSON 格式错误，请检查输入！';}
};const highlightJson = () => {setTimeout(() => {Prism.highlightAll();}, 0);
};
</script><template><pre v-if="jsonOutput" class="json-output"><code class="language-json">{{ jsonOutput }}</code></pre>
</template>

---

完善用户交互

添加复制功能

<button @click="copyJson" v-if="jsonOutput">复制</button><script setup>
const copyJson = () => {navigator.clipboard.writeText(jsonOutput.value).then(() => {alert('复制成功！');});
};
</script>

---

完整示例代码

<template><div class="json-formatter"><h2>JSON 在线格式化工具</h2><textarea v-model="jsonInput" placeholder="请输入 JSON 数据"></textarea><button @click="formatJson">格式化</button><button @click="clearJson">清空</button><button @click="copyJson" v-if="jsonOutput">复制</button><p v-if="error" class="error">{{ error }}</p><pre v-if="jsonOutput" class="json-output"><code class="language-json">{{ jsonOutput }}</code></pre></div>
</template><script setup>
import { ref, watch } from 'vue';
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';const jsonInput = ref('');
const jsonOutput = ref('');
const error = ref('');const formatJson = () => {try {jsonOutput.value = JSON.stringify(JSON.parse(jsonInput.value), null, 2);error.value = '';highlightJson();} catch (err) {error.value = 'JSON 格式错误，请检查输入！';}
};const highlightJson = () => {setTimeout(() => {Prism.highlightAll();}, 0);
};const clearJson = () => {jsonInput.value = '';jsonOutput.value = '';error.value = '';
};const copyJson = () => {navigator.clipboard.writeText(jsonOutput.value).then(() => {alert('复制成功！');});
};
</script><style scoped>
.json-formatter {max-width: 600px;margin: auto;text-align: center;
}
textarea {width: 100%;height: 150px;padding: 8px;font-size: 14px;
}
button {margin: 10px;padding: 8px 12px;cursor: pointer;
}
.json-output {background: #2d2d2d;color: #f8f8f2;padding: 10px;white-space: pre-wrap;text-align: left;overflow-x: auto;
}
.error {color: red;
}
</style>

---

小结

本文介绍了如何使用 Vue 3 实现一个 JSON 在线格式化工具，主要实现：

1. 输入 JSON 并格式化，处理错误信息。
2. 高亮显示 JSON，使用 Prism.js。
3. 支持复制功能，便于快速使用。

这个小工具可用于 Web 应用中的 JSON 处理，或者作为 Chrome 扩展的基础。

---

参考资料

• Vue 官方文档
• Prism.js 代码高亮
• Clipboard API 复制功能
• JSON在线美化工具