**摘要：**本篇文章是《Vue.js从零到精通》系列的开篇之作，我们将从Vue.js的前世今生讲起，深入理解它诞生的背景、设计理念与版本演进，帮助你建立对框架的宏观认知。随后，我们会手把手搭建基于Vite + TypeScript的开发环境，创建并剖析第一个Vue应用。通过本文，你将不仅学会"怎么做"，更能明白"为什么这么做"，为后续深入学习模板语法、组件化、路由和状态管理打下坚实基础。
一、Vue.js的前世今生
1.1 框架诞生的土壤：前端进化简史
在JavaScript诞生的最初十年，前端开发主要靠手动操作DOM。jQuery的出现大幅简化了DOM操作，但应用复杂度爆炸式增长后，这种"命令式"的写法让代码变得难以维护。2010年后，AngularJS率先将MVVM（Model-View-ViewModel）模式带入前端，让开发者体会到数据驱动视图的便利。但AngularJS的复杂性和性能问题也暴露了出来。随后，React携虚拟DOM和组件化思维横空出世，改变了整个生态。正是在这样的背景下，一个来自Google的华人工程师------尤雨溪（Evan You），决定创造一款更"轻、快、易用"的框架。
1.2 尤雨溪与Vue的诞生
2013年底，尤雨溪在业余时间开始动手编写一个实验性项目，他将AngularJS中自己最喜爱的部分（如声明式模板、双向绑定）提取出来，并配合一套极轻量的响应式系统，这就是Vue.js的雏形。2014年2月，Vue.js在GitHub上首次公开，当时的版本号是0.6。尤雨溪曾在采访中说，Vue的设计初衷就是"我想要的工具"------一个渐进式、可以自底向上逐层应用的框架。
为什么叫Vue？ Vue是法语"视图"的意思，发音类似"view"。其核心定位就是视图层框架，专注解决用户界面构建的问题。
1.3 版本演进的三个阶段
-
Vue 0.x ~ 1.x（2014-2015） 初具MVVM形态，拥有指令、过滤器、组件等概念，但生态尚不完善。这一阶段主要吸引了喜欢AngularJS但想要更轻量方案的开发者。
-
Vue 2.x（2016-2022） 2016年9月，Vue 2.0"Ghost in the Shell"发布，引入了虚拟DOM、服务端渲染、完善的组件体系和官方路由（Vue Router）、状态管理（Vuex）。这个版本让Vue真正走向主流，成为GitHub上Star数增长最快的项目之一。许多耳熟能详的企业（阿里巴巴、百度、小米等）开始在生产环境中大规模使用Vue。
-
Vue 3.x（2020年至今） 2020年9月，代号"One Piece"的Vue 3正式发布。底层完全重写，采用TypeScript开发，引入了Composition API、Proxy响应式系统、Teleport、Fragments等新特性，性能大幅提升，代码组织更加灵活。同时保持良好的向下兼容性（通过@vue/compat迁移构建）。Vue 3代表了框架未来的发展方向，也是本系列教程的主力版本。
1.4 核心设计哲学：渐进式框架
Vue的最大特色是"渐进式"。你可以在已有项目中仅用Vue处理某个小部件，也可以将其作为完整的单页应用（SPA）框架使用。它的核心库只关注视图层，官方生态（路由、状态管理、构建工具等）则可以按需集成。这种"按需取用"的设计让Vue的学习曲线极其平滑，对新手非常友好。
二、为什么选择Vue？
2.1 简洁优雅的模板语法
Vue使用基于HTML的模板语法，允许你直接写符合W3C标准的HTML，并通过指令（如v-if、v-for）赋予它们动态能力。这种写法更接近传统网页开发，心智负担小。对于你已掌握的HTML知识，可以说无缝衔接。
2.2 自动化的响应式系统
Vue 2通过Object.defineProperty实现数据劫持，Vue 3则使用Proxy，当你修改数据时，视图会自动更新，无需手动调用setState或$apply。这种"声明式渲染"让你只需关心数据本身，DOM操作完全由框架托管。
2.3 强大的组件系统
Vue的单文件组件（.vue）将模板、逻辑和样式整合在一个文件中，极大提升了代码的内聚性和可维护性。配合Scoped CSS和TypeScript，开发体验非常流畅。
2.4 繁荣的生态和中文社区
Vue拥有丰富的官方维护库：Vue Router、Pinia（状态管理）、Vite（构建工具）、Vue Devtools等。特别是中文文档极其完善、社区活跃，对于中文母语者来说，学习资源几乎没有障碍。
三、搭建开发环境
3.1 检查Node.js版本
打开终端，执行：
node -v确保版本在16.0以上。如果版本过低，建议使用nvm更新。
3.2 使用pnpm创建Vue+TypeScript项目
pnpm是你的老朋友了，我们用它来创建一个全新的Vue 3项目。
pnpm create vite my-vue-app --template vue-ts
cd my-vue-app
pnpm install等待依赖安装完成。上述命令创建了一个名为my-vue-app的文件夹，使用vue-ts模板（即Vue + TypeScript）。
3.3 项目结构一览
安装完毕后，你会看到如下目录结构：
my-vue-app/
├── index.html # 入口HTML文件
├── package.json # 项目依赖与脚本
├── pnpm-lock.yaml # pnpm锁文件
├── tsconfig.json # TypeScript配置
├── vite.config.ts # Vite配置文件
├── public/ # 静态资源（不会被编译）
└── src/
├── main.ts # 应用入口
├── App.vue # 根组件
├── style.css # 全局样式
└── vite-env.d.ts # Vite环境类型声明这个结构与你用过的其他前端脚手架（如create-react-app）非常类似。src目录是主战场，.vue单文件组件将是你编写最多的文件。
3.4 启动开发服务器
运行：
pnpm devVite会启动一个本地开发服务器，默认在http://localhost:5173。打开浏览器，你会看到Vue默认的欢迎页面。Vite的极速冷启动会让你立刻感受到现代构建工具的魅力。
四、第一个Vue应用：Hello, Vue 3!
现在，我们来剖析这个默认生成的代码，并亲手修改它。
4.1 入口起点：index.html
打开根目录的index.html，你会看到：
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-vue-app</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>关键点是<div id="app">------它将是Vue应用挂载的容器，以及通过type="module"引入的main.ts，这是整个应用的JavaScript入口。
4.2 应用入口：src/main.ts
TypeScript
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
createApp(App).mount('#app')createApp是Vue 3的核心函数，用于创建一个应用实例。.mount('#app')则将Vue应用挂载到id="app"的DOM元素上。整个流程非常简洁：导入Vue根组件，创建应用，挂载到容器。
4.3 根组件：src/App.vue
这是整个应用的起点，也是所有组件的根。打开这个文件：
TypeScript
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld />
</template>
<style scoped>
</style>你可能会好奇：一个.vue文件里有三个块------<script setup>、<template>和<style scoped>，这正是Vue单文件组件的核心魅力。我们逐一解读：
-
<script setup lang="ts">：这是Vue 3推荐的组合式API写法，setup语法糖让你以更简洁的方式编写组件逻辑，lang="ts"指定使用TypeScript。 -
<template>：声明式的模板，写入任何合法的HTML，Vue的编译器会将其转化为虚拟DOM渲染函数，组件中导入了HelloWorld子组件。 -
<style scoped>：带scoped属性的样式只作用于当前组件，不会污染全局。
4.4 修改代码：自己的问候
现在，让我们动手将默认内容改成自己的"Hello Vue"。编辑App.vue：
html
<script setup lang="ts">
// 这里暂时不需要逻辑
</script>
<template>
<div class="container">
<h1>{{ greeting }}</h1>
<p>欢迎来到 Vue 3 的世界</p>
</div>
</template>
<script lang="ts">
// 我们也可以使用普通<script>块
export default {
data() {
return {
greeting: 'Hello, Vue 3!'
}
}
}
</script>
<style scoped>
.container {
text-align: center;
margin-top: 60px;
font-family: 'Arial', sans-serif;
}
h1 {
color: #42b883;
}
</style>保存文件，浏览器会自动热更新，显示"Hello, Vue 3!"。注意我们在模板中使用了双花括号{``{ greeting }}，这是Vue的插值语法 ，它会将数据对象中的greeting值渲染到视图中。我们通过data()函数返回一个对象，该对象会被Vue的响应式系统接管。当greeting发生改变时，视图会自动更新------这就是响应式最基本的体现。
4.5 理解Vue实例与挂载
每个Vue应用都是从创建一个应用实例开始的。createApp接收一个根组件对象，返回一个应用实例。该实例有mount方法，可以将其挂载到真实的DOM容器上。实例还提供use、component、directive等API，允许你全局注册插件、组件和指令。这种设计将"应用"和"视图"解耦，使得测试和SSR更加方便。
五、模板语法初探
5.1 插值
TypeScript
<span>Message: {{ msg }}</span>双花括号内可以放入JavaScript表达式，例如：
TypeScript
<p>{{ number + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>5.2 指令
指令是带有v-前缀的特殊属性，其值应为JavaScript表达式。Vue提供了大量内置指令，用声明式的方式完成DOM操作。
- v-bind ：动态绑定HTML属性。简写为
:。
TypeScript
<img v-bind:src="imageSrc" />
<a :href="url">链接</a>- v-if / v-else-if / v-else：条件渲染。
TypeScript
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>- v-for：列表渲染。
TypeScript
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>- v-on ：监听DOM事件。简写为
@。
TypeScript
<button v-on:click="handleClick">点击我</button>
<button @click="count++">增加</button>- v-model：表单输入双向绑定。
TypeScript
<input v-model="username" placeholder="输入用户名" />
<p>你的用户名是: {{ username }}</p>5.3 组件使用
我们已经在App.vue中使用了HelloWorld组件。组件标签可以是大写开头（PascalCase）或连字符形式（kebab-case），在模板中都能识别。Vue的组件系统是构建可复用UI的基石。
六、总结
通过这篇文章，你已完整了解了Vue.js的诞生背景、版本演进和"渐进式框架"的设计理念。我们使用pnpm和Vite搭建了Vue 3 + TypeScript的开发环境，仔细剖析了第一个Vue应用的每个文件，并亲手修改出了自己的"Hello Vue"。此外，我们还初探了插值和指令等模板语法核心。
-
Vue由尤雨溪在2014年创建，以轻量、易用和渐进式著称。
-
Vue 3基于TypeScript重写，使用Proxy实现响应式，带来了Composition API。
-
项目结构清晰，单文件组件（.vue）集模板、逻辑、样式于一体。
-
createApp(App).mount('#app')是每个Vue应用的启动模式。 -
模板语法以声明式为主，指令和插值让你专注于数据，而非DOM。
如果这篇文章帮你解决了实操上的困惑，别忘记点击点赞、分享 ，也可以留言告诉我你遇到的其它问题，我会尽快回复。动手练习是掌握编程最快的方法，请务必亲手敲一遍本文的所有示例代码，并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源，谢谢大家。