Vue代碼生成器之純HTML實現(xiàn)過程

更新時間：2025年08月27日 10:26:28 作者：zzywxc787

這篇文章主要介紹了Vue代碼生成器之純HTML實現(xiàn)過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

設(shè)計思路

1.使用Bootstrap進行快速美觀的界面搭建

2.實現(xiàn)三個獨立的功能區(qū)域

Vue組件生成器
HTML頁面生成器
JSON數(shù)據(jù)生成器

3.添加實時預(yù)覽功能

使用localStorage保存生成的內(nèi)容

實現(xiàn)代碼

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  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數(shù)據(jù) - 純HTML實現(xiàn)</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>創(chuàng)建響應(yīng)式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數(shù)據(jù)生成器</h3>
                    <p>生成模擬API返回的JSON數(shù)據(jù)</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組件生成器模態(tài)框 -->
    <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">數(shù)據(jù)屬性 (每行一個，格式: 名稱:默認值)</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">模板內(nèi)容</label>
                        <textarea class="form-control" id="vueTemplate" rows="4" placeholder="<div>
  <h1>{{ message }}</h1>
  <button @click='increment'>點擊次數(shù): {{ count }}</button>
</div>"></textarea>
                    </div>
                    <div class="d-grid">
                        <button class="btn btn-primary" onclick="generateVueComponent()">生成Vue組件</button>
                    </div>
                    <div class="mt-4">
                        <h5>生成結(jié)果:</h5>
                        <div class="code-area" id="vueOutput">
                            <!-- Vue代碼將在這里顯示 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- HTML頁面生成器模態(tài)框 -->
    <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="例如: 我的網(wǎng)頁">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">主要內(nèi)容</label>
                        <textarea class="form-control" id="htmlContent" rows="4" placeholder="輸入HTML內(nèi)容..."></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>生成結(jié)果:</h5>
                        <div class="code-area" id="htmlOutput">
                            <!-- HTML代碼將在這里顯示 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JSON生成器模態(tài)框 -->
    <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數(shù)據(jù)生成器</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結(jié)構(gòu) (每行一個屬性，格式: 名稱:類型:示例值)</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">項目數(shù)量</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數(shù)據(jù)</button>
                    </div>
                    <div class="mt-4">
                        <h5>生成結(jié)果:</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      // 方法實現(xià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>這是生成的內(nèi)容</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數(shù)據(jù)
        function generateJsonData() {
            const structure = document.getElementById('jsonStructure').value;
            const count = parseInt(document.getElementById('jsonCount').value) || 3;
            
            if (!structure) {
                document.getElementById('jsonOutput').textContent = '請先定義JSON結(jié)構(gòu)';
                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數(shù)據(jù)', 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>