Vue.js 凭借其独特的魅力，早Yi成为了无数开发者手中的利剑。当我们谈论起 Vue3.0 时那种对响应式原理的精妙重构以及对 Composition API 的引入，总是让人心潮澎湃。但是无论多么宏大的技术蓝图，终究dou要从Zui基础的一步开始——那就是构建我们的“第一个程序”。这不仅仅是一行行代码的堆砌，geng是我们与这个框架进行第一次“握手”的仪式。

初识Vue3：不仅仅是Hello World

hen多人会问，Vue3.0 的第一个程序到底是什么？其实它不仅仅是一个简单的“Hello World”输出，而是一个包含了现代前端工程化思维的完整缩影。当我们通过脚手架工具搭建起项目的那一刻起，我们就Yi经踏入了一个由组件化、模块化和路由管理构成的精彩世界。

在深入代码之前，我们不妨先思考一下：为什么我们要选择 Vue？相比于传统的直接操作 DOM 节点，Vue 带来的是一种全新的思维方式——MVVM模式。在这种模式下我们不再需要苦哈哈地去追踪每一个 DOM 元素的变化，而是专注于数据的维护。ViewModel 就像一个智Neng的中间人，默默地观察着数据的变化，并自动geng新视图。这种“双向绑定”的魔力，正是 Vue 让人爱不释手的原因之一。

项目的骨架：从 index.html 说起

让我们把目光投向项目的Zui底层。在一个标准的 Vue3.0 项目中，public 文件夹下的 index.html 是整个应用的基石。你可Neng会惊讶地发现，这个文件的内容竟然如此简洁。它没有复杂的 CSS 堆砌，也没有冗长的 JS 逻辑，它唯一的核心任务，就是提供一个“挂载点”。

请kan下面这段代码，这就是我们故事的起点：

  
    
favicon.ico">
  
    
    

kan到了吗？那个

就像是为 Vue 准备的一块空画布。Vue 引擎启动后会将它精心编织的所有组件、样式和逻辑，统统渲染到这个小小的 div 之中。除此之外页面的标题也是在这里通过模板语法进行配置的，这种设计既保持了 HTML 的纯净，又赋予了其动态的Neng力。

命令中心：main.js 的奥秘

Ru果说 index.html 是地基，那么 src 目录下的 main.js 无疑就是整个项目的大脑。作为 Vue3.0 项目的入口文件，它的执行顺序是从上到下的，每一步dou至关重要。

在这里我们见证了 Vue3.0 Zui具标志性的变化之一——不再使用 new Vue，而是引入了 createApp 方法。这是一种geng加函数式、geng加模块化的写法。让我们来kankan这段核心代码：

import { createApp } from 'vue' //从vue核心库中引入createApp方法
import App from './App.vue' //引入一个当前目录下的名字为App.vue的组件
import router from './router' //引入路由
import store from './store' //引入状态管理
//创建App，使用路由将其挂载到index.html文件上的

createApp.use.use.mount

这段代码虽然简短，却蕴含着大智慧。我们通过 ES6 的模块化语法引入了所需的资源。这里的引入方式采用的是相对地址，Webpack 会帮我们处理好一切依赖关系。接着，createApp 创建了一个应用实例，随后通过链式调用 .use 和 .use 分别注入了全局的路由和状态管理插件。Zui后.mount 这一声令下Vue 就正式接管了页面开始它的表演。

路由系统：构建单页应用的导航

在现代 Web 应用中，页面跳转不再需要重新加载整个网页，这就是单页应用的魅力。而实现这一功Neng的核心，就是 Vue Router。在 src/router/index.js 文件中，我们定义了用户访问的路径与组件之间的映射关系。

Vue3.0 配合 Vue Router 4.x，引入了 createRouter 和 createWebHistory等新的 API。下面这段代码展示了如何配置一个基础的路由：

//从vue-router中导入createRouter、createWebHistory方法
import { createRouter, createWebHashHistory } from 'vue-router'
//引入views目录下的Home.vue组件,取别名为Home
import HomeView from '../views/HomeView.vue'
const routes = 
const router = createRouter({ //创建路由实例
  history: createWebHashHistory, //创建history模式的路由
  routes //上面定义配置路由的数组
})
export default router //暴露路由

懒加载的艺术

细心的你可Neng会发现“关于”页面的组件引入方式有些不同。这就是所谓的“路由懒加载”。想象一下Ru果我们的应用非常庞大，把所有代码dou打包进一个文件，首屏加载的速度将会慢得让人抓狂。而懒加载技术允许我们将不同的路由分割成不同的代码块，只有当用户真正访问某个路由时对应的代码才会被下载。这不仅提升了用户体验，也是一种极佳的性Neng优化手段。

组件化思维：App.vue 与 HomeView

Vue 的核心思想是组件化。在 App.vue 中，我们kan到了组件的典型结构：模板、脚本和样式。App.vue 通常作为根组件，它包含了顶层的导航栏以及一个至关重要的标签——。

这里的 就像是导航的按钮，点击它会触发 URL 的变化；而 则是一个占位符，它会根据当前的 URL 动态地显示出对应的组件内容。比如当用户在浏览器地址栏输入 http://localhost:8080/ 时Router 就会去匹配 path: '/' 规则，并将 HomeView.vue 渲染到这个位置。

数据流转：父子组件的第一次握手

接下来让我们深入到 HomeView.vue 和 HelloWorld.vue 的交互中。这是理解 Vue 组件通信的关键一步。在 HomeView 中，我们引入了子组件 HelloWorld，并尝试向它传递一段信息。

请注意 这一行。这就是父组件向子组件传递数据的方式——通过 Props。在子组件 HelloWorld.vue 中，我们需要接收这个数据：

当页面渲染时{{ msg }} 会被替换成父组件传入的“欢迎您，Vue.js App!”。这种单向的数据流，保证了组件之间的解耦，让我们的代码geng加易于维护。

自定义Hello World：注入灵魂

虽然脚手架生成的代码hen规范，但那毕竟是别人的东西。为了让这个“第一个程序”真正属于我们，不妨动手修改一下。比如我们Ke以利用 Vue3.0 新增的 setup 函数和 ref 来定义一个响应式的数据。

试着在 HelloWorld.vue 中加入这样一段逻辑：

在这里setup 函数是 Composition API 的入口。我们使用 ref 创建了一个响应式的引用 message。当你在浏览器中kan到这行橙色的文字时那种成就感是无与伦比的。这不仅仅是一个变量的输出，这是你驾驭 Vue3.0 响应式系统的开始。

运行起来：见证奇迹的时刻

所有的代码douYi经准备就绪，现在是时候检验成果了。回到终端，输入启动命令：

npm run serve

随着编译进度的条跑满，终端会弹出一个本地地址，通常是 http://localhost:8080。在浏览器中打开这个地址，你将kan到那个熟悉的 Vue Logo，以及你亲手编写的欢迎语。

到此为止，我们就完成了第一个 Vue 程序的构建与运行。从 index.html 的空壳，到 main.js 的启动，再到路由的配置和组件的渲染，每一步dou环环相扣。这不仅仅是一个技术练习，geng是一次对现代前端工程化体系的深度体验。

迈出第一步，未来可期

回顾整个过程，我们并没有写出什么惊天动地的复杂功Neng，但我们搭建起了一个坚实的起点。Vue3.0 的第一个程序，就像是一把钥匙，打开了通往组件化开发、状态管理、路由构建等高级话题的大门。

在这个过程中，你可Neng会遇到报错，可Neng会因为路径问题而抓狂，但这dou是成长的必经之路。记住每一个优秀的 Vue 工程师，dou是从这一个个简单的 createApp 开始的。当你kan着浏览器中那个运行良好的页面时请给自己一点掌声。因为你Yi经不仅仅是在写代码，你是在用代码构建未来的数字世界。继续探索吧，Vue 的世界远比你想象的geng加精彩！

---