Vue代码生成器之纯HTML实现过程
作者：zzywxc787
这篇文章主要介绍了Vue代码生成器之纯HTML实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
我将设计一个纯HTML页面，可以生成Vue组件代码、HTML页面和JSON数据。
这个系统将包含三个主要功能区域，并具有直观的用户界面。
设计思路
1.使用Bootstrap进行快速美观的界面搭建
2.实现三个独立的功能区域
- Vue组件生成器
- HTML页面生成器
- JSON数据生成器
3.添加实时预览功能
- 使用localStorage保存生成的内容
实现代码
- html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue代码生成器</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
padding-top: 20px;
}
.header {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.generator-card {
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
padding: 20px;
margin-bottom: 25px;
transition: transform 0.3s;
}
.generator-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.nav-tabs .nav-link.active {
font-weight: 600;
border-bottom: 3px solid #0d6efd;
}
.preview-area {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
padding: 15px;
min-height: 200px;
max-height: 300px;
overflow-y: auto;
}
.code-area {
font-family: 'Courier New', monospace;
background-color: #272822;
color: #f8f8f2;
border-radius: 5px;
padding: 15px;
min-height: 200px;
max-height: 300px;
overflow-y: auto;
font-size: 14px;
}
.btn-generate {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-weight: 600;
transition: all 0.3s;
}
.btn-generate:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.saved-items {
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
margin-top: 30px;
}
.feature-icon {
font-size: 2rem;
margin-bottom: 15px;
color: #6a11cb;
}
</style>
</head>
<body>
<div class="container">
<div class="header text-center">
<h1 class="display-4">Vue代码生成器</h1>
<p class="lead">快速生成Vue组件、HTML页面和JSON数据 - 纯HTML实现</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="generator-card text-center">
<div class="feature-icon">⚡</div>
<h3>Vue组件生成器</h3>
<p>通过简单表单生成Vue单文件组件</p>
<button class="btn btn-generate" data-bs-toggle="modal" data-bs-target="#vueModal">开始生成</button>
</div>
</div>
<div class="col-md-4">
<div class="generator-card text-center">
<div class="feature-icon">🛠️</div>
<h3>HTML页面生成器</h3>
<p>创建响应式HTML页面模板</p>
<button class="btn btn-generate" data-bs-toggle="modal" data-bs-target="#htmlModal">开始生成</button>
</div>
</div>
<div class="col-md-4">
<div class="generator-card text-center">
<div class="feature-icon">📊</div>
<h3>JSON数据生成器</h3>
<p>生成模拟API返回的JSON数据</p>
<button class="btn btn-generate" data-bs-toggle="modal" data-bs-target="#jsonModal">开始生成</button>
</div>
</div>
</div>
<div class="saved-items">
<h3>已保存的项目</h3>
<div id="savedItemsList" class="mt-3">
<p class="text-muted">暂无保存的项目</p>
</div>
</div>
</div>
<!-- Vue组件生成器模态框 -->
<div class="modal fade" id="vueModal" tabindex="-1" aria-labelledby="vueModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="vueModalLabel">Vue组件生成器</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">组件名称</label>
<input type="text" class="form-control" id="vueComponentName" placeholder="例如: MyComponent">
</div>
<div class="mb-3">
<label class="form-label">数据属性 (每行一个，格式: 名称:默认值)</label>
<textarea class="form-control" id="vueDataProps" rows="3" placeholder="message: 'Hello Vue!'
count: 0"></textarea>
</div>
<div class="mb-3">
<label class="form-label">方法 (每行一个方法名)</label>
<textarea class="form-control" id="vueMethods" rows="2" placeholder="increment
reset"></textarea>
</div>
<div class="mb-3">
<label class="form-label">模板内容</label>
<textarea class="form-control" id="vueTemplate" rows="4" placeholder="<div>
<h1>{{ message }}</h1>
<button @click='increment'>点击次数: {{ count }}</button>
</div>"></textarea>
</div>
<div class="d-grid">
<button class="btn btn-primary" onclick="generateVueComponent()">生成Vue组件</button>
</div>
<div class="mt-4">
<h5>生成结果:</h5>
<div class="code-area" id="vueOutput">
<!-- Vue代码将在这里显示 -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HTML页面生成器模态框 -->
<div class="modal fade" id="htmlModal" tabindex="-1" aria-labelledby="htmlModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="htmlModalLabel">HTML页面生成器</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">页面标题</label>
<input type="text" class="form-control" id="htmlTitle" placeholder="例如: 我的网页">
</div>
<div class="mb-3">
<label class="form-label">主要内容</label>
<textarea class="form-control" id="htmlContent" rows="4" placeholder="输入HTML内容..."></textarea>
</div>
<div class="mb-3">
<label class="form-label">CSS样式</label>
<textarea class="form-control" id="htmlCss" rows="3" placeholder="输入CSS样式..."></textarea>
</div>
<div class="d-grid">
<button class="btn btn-primary" onclick="generateHtmlPage()">生成HTML页面</button>
</div>
<div class="mt-4">
<h5>生成结果:</h5>
<div class="code-area" id="htmlOutput">
<!-- HTML代码将在这里显示 -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JSON生成器模态框 -->
<div class="modal fade" id="jsonModal" tabindex="-1" aria-labelledby="jsonModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="jsonModalLabel">JSON数据生成器</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">JSON结构 (每行一个属性，格式: 名称:类型:示例值)</label>
<textarea class="form-control" id="jsonStructure" rows="4" placeholder="name:string:John Doe
age:number:30
isActive:boolean:true
hobbies:array:['reading', 'traveling']"></textarea>
</div>
<div class="mb-3">
<label class="form-label">项目数量</label>
<input type="number" class="form-control" id="jsonCount" value="3" min="1" max="10">
</div>
<div class="d-grid">
<button class="btn btn-primary" onclick="generateJsonData()">生成JSON数据</button>
</div>
<div class="mt-4">
<h5>生成结果:</h5>
<div class="code-area" id="jsonOutput">
<!-- JSON代码将在这里显示 -->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 初始化示例
document.addEventListener('DOMContentLoaded', function() {
loadSavedItems();
});
// 生成Vue组件
function generateVueComponent() {
const name = document.getElementById('vueComponentName').value || 'MyComponent';
const dataProps = document.getElementById('vueDataProps').value;
const methods = document.getElementById('vueMethods').value;
const template = document.getElementById('vueTemplate').value;
let dataContent = '';
if (dataProps) {
const props = dataProps.split('\n').filter(line => line.trim());
dataContent = 'data() {\n return {\n';
props.forEach(prop => {
const [key, value] = prop.split(':').map(item => item.trim());
dataContent += ` ${key}: ${value || 'null'},\n`;
});
dataContent += ' };\n },';
}
let methodsContent = '';
if (methods) {
const methodList = methods.split('\n').filter(line => line.trim());
methodsContent = 'methods: {\n';
methodList.forEach(method => {
methodsContent += ` ${method}() {\n // 方法实现\n },\n`;
});
methodsContent += ' },';
}
const vueCode = `<template>
${template || '<div>\n \n </div>'}
</template>
<script>
export default {
name: '${name}',
${dataContent}
${methodsContent}
};
<\/script>
<style scoped>
/* 添加组件样式 */
</style>`;
document.getElementById('vueOutput').textContent = vueCode;
saveItem('Vue组件: ' + name, vueCode);
}
// 生成HTML页面
function generateHtmlPage() {
const title = document.getElementById('htmlTitle').value || '生成的页面';
const content = document.getElementById('htmlContent').value || '<p>这是生成的内容</p>';
const css = document.getElementById('htmlCss').value || 'body { font-family: Arial, sans-serif; }';
const htmlCode = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}</title>
<style>
${css}
</style>
</head>
<body>
${content}
</body>
</html>`;
document.getElementById('htmlOutput').textContent = htmlCode;
saveItem('HTML页面: ' + title, htmlCode);
}
// 生成JSON数据
function generateJsonData() {
const structure = document.getElementById('jsonStructure').value;
const count = parseInt(document.getElementById('jsonCount').value) || 3;
if (!structure) {
document.getElementById('jsonOutput').textContent = '请先定义JSON结构';
return;
}
const lines = structure.split('\n').filter(line => line.trim());
const items = [];
for (let i = 0; i < count; i++) {
const item = {};
lines.forEach(line => {
const [key, type, example] = line.split(':').map(part => part.trim());
if (type === 'number') {
item[key] = example ? parseInt(example) + i : i;
} else if (type === 'boolean') {
item[key] = example ? example.toLowerCase() === 'true' : Boolean(i % 2);
} else if (type === 'array') {
try {
item[key] = JSON.parse(example || '[]');
} catch {
item[key] = [];
}
} else if (type === 'object') {
try {
item[key] = JSON.parse(example || '{}');
} catch {
item[key] = {};
}
} else {
item[key] = example ? example.replace('${i}', i + 1) : `值${i+1}`;
}
});
items.push(item);
}
const jsonCode = JSON.stringify(items, null, 2);
document.getElementById('jsonOutput').textContent = jsonCode;
saveItem('JSON数据', jsonCode);
}
// 保存项目到localStorage
function saveItem(name, content) {
let items = JSON.parse(localStorage.getItem('generatedItems') || '[]');
items.push({
id: Date.now(),
name: name,
content: content,
type: name.split(':')[0],
date: new Date().toLocaleString()
});
localStorage.setItem('generatedItems', JSON.stringify(items));
loadSavedItems();
}
// 加载已保存的项目
function loadSavedItems() {
const items = JSON.parse(localStorage.getItem('generatedItems') || '[]');
const container = document.getElementById('savedItemsList');
if (items.length === 0) {
container.innerHTML = '<p class="text-muted">暂无保存的项目</p>';
return;
}
container.innerHTML = '';
items.forEach(item => {
const div = document.createElement('div');
div.className = 'card mb-2';
div.innerHTML = `
<div class="card-body">
<h5 class="card-title">${item.name}</h5>
<p class="card-text"><small class="text-muted">${item.date} | ${item.type}</small></p>
<button class="btn btn-sm btn-outline-primary" onclick="viewItem(${item.id})">查看</button>
<button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${item.id})">删除</button>
</div>
`;
container.appendChild(div);
});
}
// 查看项目
function viewItem(id) {
const items = JSON.parse(localStorage.getItem('generatedItems') || '[]');
const item = items.find(i => i.id === id);
if (item) {
alert(item.content);
}
}
// 删除项目
function deleteItem(id) {
let items = JSON.parse(localStorage.getItem('generatedItems') || '[]');
items = items.filter(i => i.id !== id);
localStorage.setItem('generatedItems', JSON.stringify(items));
loadSavedItems();
}
</script>
</body>
</html>功能说明
这个纯HTML页面实现了以下功能：
Vue组件生成器：
- 输入组件名称、数据属性、方法和模板内容
- 生成完整的Vue单文件组件代码
HTML页面生成器：
- 输入页面标题、内容和CSS样式
- 生成完整的HTML页面代码
JSON数据生成器：
- 定义JSON结构（属性名:类型:示例值）
- 指定生成的项目数量
- 生成模拟API返回的JSON数据
数据持久化：
- 使用localStorage保存所有生成的内容
- 可以查看和删除已保存的项目
使用说明
- 点击三个功能区域中的任意一个"开始生成"按钮
- 在弹出窗口中填写相应的表单信息
- 点击生成按钮查看结果
- 生成的内容会自动保存，可以在"已保存的项目"区域查看和管理
这个系统完全基于纯HTML/CSS/JavaScript实现，无需任何后端支持，可以直接在浏览器中运行。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。