Vue 3 项目启动流程详解

Vue 3 项目的启动流程相比 Vue 2 有了显著变化，采用了新的应用实例创建方式和组合式 API。下面我将详细讲解 Vue 3 项目的启动过程，并提供一个可视化演示。

实现思路

创建 Vue 3 应用实例
配置根组件和必要的插件
挂载应用到 DOM
展示启动过程中的关键步骤

代码实现

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 3 启动流程详解</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);min-height: 100vh;padding: 20px;color: #2c3e50;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}header {text-align: center;margin-bottom: 40px;padding: 20px;background: white;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}h1 {color: #3498db;margin-bottom: 10px;}.subtitle {color: #7f8c8d;font-size: 1.2rem;}.content {display: flex;flex-wrap: wrap;gap: 20px;}.explanation {flex: 1;min-width: 300px;background: white;padding: 25px;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}.demo {flex: 1;min-width: 300px;background: white;padding: 25px;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}h2 {color: #3498db;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #3498db;}.step {margin-bottom: 25px;padding: 15px;border-left: 4px solid #3498db;background: #f8f9fa;border-radius: 0 8px 8px 0;}.step-number {display: inline-block;width: 30px;height: 30px;background: #3498db;color: white;text-align: center;line-height: 30px;border-radius: 50%;margin-right: 10px;}.step-title {font-weight: bold;margin-bottom: 8px;color: #2c3e50;}.code-block {background: #2c3e50;color: #f8f9fa;padding: 15px;border-radius: 8px;margin: 15px 0;overflow-x: auto;font-family: 'Courier New', monospace;}.console {background: #2c3e50;color: #00d0ff;padding: 15px;border-radius: 8px;height: 200px;overflow-y: auto;margin-top: 20px;font-family: 'Courier New', monospace;}.log-entry {margin-bottom: 8px;font-size: 0.9rem;}.timestamp {color: #7f8c8d;margin-right: 10px;}button {background: #3498db;color: white;border: none;padding: 12px 20px;border-radius: 6px;cursor: pointer;font-size: 1rem;margin-top: 15px;transition: background 0.3s;}button:hover {background: #2980b9;}.app-container {margin-top: 20px;padding: 20px;border: 2px dashed #3498db;border-radius: 8px;text-align: center;}.app-title {color: #3498db;margin-bottom: 15px;}.counter {font-size: 2rem;font-weight: bold;color: #2c3e50;margin: 15px 0;}.lifecycle {margin-top: 20px;padding: 15px;background: #e8f4fc;border-radius: 8px;font-size: 0.9rem;}.lifecycle-title {font-weight: bold;margin-bottom: 10px;color: #3498db;}</style>
</head>
<body><div id="app" class="container"><header><h1>Vue 3 项目启动流程详解</h1><p class="subtitle">从入口文件到组件渲染的完整过程</p></header><div class="content"><div class="explanation"><h2>启动流程步骤</h2><div class="step"><span class="step-number">1</span><div class="step-title">创建应用实例</div><p>使用 <code>createApp</code> 函数创建 Vue 应用实例，这是 Vue 3 的新特性，替代了 Vue 2 的 <code>new Vue()</code> 方式。</p><div class="code-block">const app = Vue.createApp({ /* 根组件选项 */ });</div></div><div class="step"><span class="step-number">2</span><div class="step-title">配置应用</div><p>注册插件、全局组件、指令等。Vue 3 使用应用实例的方法进行配置，而不是全局配置。</p><div class="code-block">app.use(router).use(store); // 注册路由和状态管理</div></div><div class="step"><span class="step-number">3</span><div class="step-title">挂载应用</div><p>调用 <code>mount()</code> 方法将应用挂载到 DOM 元素上，返回根组件实例。</p><div class="code-block">const vm = app.mount('#app');</div></div><div class="step"><span class="step-number">4</span><div class="step-title">编译与渲染</div><p>Vue 编译模板，创建虚拟 DOM，然后将组件渲染到页面。</p><div class="code-block">// Vue 内部处理模板编译和渲染</div></div></div><div class="demo"><h2>启动过程演示</h2><div class="console" id="console"><div class="log-entry"><span class="timestamp">[00:00:00]</span> 准备初始化 Vue 3 应用...</div></div><button id="start-btn">开始启动过程</button><div class="app-container"><h3 class="app-title">Vue 应用挂载区域</h3><p>应用状态: <span id="app-status">未初始化</span></p><div class="counter" id="counter">0</div><button id="increment-btn" disabled>+1</button></div><div class="lifecycle"><div class="lifecycle-title">生命周期状态</div><div id="lifecycle-status">beforeCreate: 未触发, created: 未触发, beforeMount: 未触发, mounted: 未触发</div></div></div></div></div><script>// 模拟控制台输出const consoleElement = document.getElementById('console');function logToConsole(message) {const now = new Date();const timestamp = `[${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}]`;const logEntry = document.createElement('div');logEntry.className = 'log-entry';logEntry.innerHTML = `<span class="timestamp">${timestamp}</span> ${message}`;consoleElement.appendChild(logEntry);consoleElement.scrollTop = consoleElement.scrollHeight;}// 模拟启动过程document.getElementById('start-btn').addEventListener('click', function() {this.disabled = true;logToConsole('开始创建 Vue 应用实例...');setTimeout(() => {logToConsole('调用 Vue.createApp()...');document.getElementById('app-status').textContent = '创建中';setTimeout(() => {logToConsole('应用实例创建完成');logToConsole('配置应用: 注册插件和组件...');setTimeout(() => {logToConsole('调用 app.mount("#app")...');document.getElementById('app-status').textContent = '挂载中';// 模拟生命周期setTimeout(() => {logToConsole('生命周期: beforeCreate → created');document.getElementById('lifecycle-status').textContent = 'beforeCreate: 已触发, created: 已触发, beforeMount: 未触发, mounted: 未触发';setTimeout(() => {logToConsole('生命周期: beforeMount → mounted');document.getElementById('lifecycle-status').textContent = 'beforeCreate: 已触发, created: 已触发, beforeMount: 已触发, mounted: 已触发';logToConsole('应用挂载完成！');document.getElementById('app-status').textContent = '已挂载';// 启用计数器按钮document.getElementById('increment-btn').disabled = false;// 简单计数器功能let count = 0;const counterElement = document.getElementById('counter');document.getElementById('increment-btn').addEventListener('click', function() {count++;counterElement.textContent = count;logToConsole(`计数器增加: ${count}`);});}, 1000);}, 1000);}, 1000);}, 1000);}, 500);});</script>
</body>
</html>