摘要本篇文章是《Vue.js从零到精通》系列的开篇之作我们将从Vue.js的前世今生讲起深入理解它诞生的背景、设计理念与版本演进帮助你建立对框架的宏观认知。随后我们会手把手搭建基于Vite TypeScript的开发环境创建并剖析第一个Vue应用。通过本文你将不仅学会“怎么做”更能明白“为什么这么做”为后续深入学习模板语法、组件化、路由和状态管理打下坚实基础。一、Vue.js的前世今生1.1 框架诞生的土壤前端进化简史在JavaScript诞生的最初十年前端开发主要靠手动操作DOM。jQuery的出现大幅简化了DOM操作但应用复杂度爆炸式增长后这种“命令式”的写法让代码变得难以维护。2010年后AngularJS率先将MVVMModel-View-ViewModel模式带入前端让开发者体会到数据驱动视图的便利。但AngularJS的复杂性和性能问题也暴露了出来。随后React携虚拟DOM和组件化思维横空出世改变了整个生态。正是在这样的背景下一个来自Google的华人工程师——尤雨溪Evan You决定创造一款更“轻、快、易用”的框架。1.2 尤雨溪与Vue的诞生2013年底尤雨溪在业余时间开始动手编写一个实验性项目他将AngularJS中自己最喜爱的部分如声明式模板、双向绑定提取出来并配合一套极轻量的响应式系统这就是Vue.js的雏形。2014年2月Vue.js在GitHub上首次公开当时的版本号是0.6。尤雨溪曾在采访中说Vue的设计初衷就是“我想要的工具”——一个渐进式、可以自底向上逐层应用的框架。为什么叫VueVue是法语“视图”的意思发音类似“view”。其核心定位就是视图层框架专注解决用户界面构建的问题。1.3 版本演进的三个阶段Vue 0.x ~ 1.x2014-2015初具MVVM形态拥有指令、过滤器、组件等概念但生态尚不完善。这一阶段主要吸引了喜欢AngularJS但想要更轻量方案的开发者。Vue 2.x2016-20222016年9月Vue 2.0“Ghost in the Shell”发布引入了虚拟DOM、服务端渲染、完善的组件体系和官方路由Vue Router、状态管理Vuex。这个版本让Vue真正走向主流成为GitHub上Star数增长最快的项目之一。许多耳熟能详的企业阿里巴巴、百度、小米等开始在生产环境中大规模使用Vue。Vue 3.x2020年至今2020年9月代号“One Piece”的Vue 3正式发布。底层完全重写采用TypeScript开发引入了Composition API、Proxy响应式系统、Teleport、Fragments等新特性性能大幅提升代码组织更加灵活。同时保持良好的向下兼容性通过vue/compat迁移构建。Vue 3代表了框架未来的发展方向也是本系列教程的主力版本。1.4 核心设计哲学渐进式框架Vue的最大特色是“渐进式”。你可以在已有项目中仅用Vue处理某个小部件也可以将其作为完整的单页应用SPA框架使用。它的核心库只关注视图层官方生态路由、状态管理、构建工具等则可以按需集成。这种“按需取用”的设计让Vue的学习曲线极其平滑对新手非常友好。二、为什么选择Vue2.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创建VueTypeScript项目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你会看到!doctype html html langen head meta charsetUTF-8 / link relicon typeimage/svgxml href/favicon.svg / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titlemy-vue-app/title /head body div idapp/div script typemodule src/src/main.ts/script /body /html关键点是div idapp——它将是Vue应用挂载的容器以及通过typemodule引入的main.ts这是整个应用的JavaScript入口。4.2 应用入口src/main.tsimport { createApp } from vue import App from ./App.vue import ./style.css createApp(App).mount(#app)createApp是Vue 3的核心函数用于创建一个应用实例。.mount(#app)则将Vue应用挂载到idapp的DOM元素上。整个流程非常简洁导入Vue根组件创建应用挂载到容器。4.3 根组件src/App.vue这是整个应用的起点也是所有组件的根。打开这个文件script setup langts import HelloWorld from ./components/HelloWorld.vue /script template HelloWorld / /template style scoped /style你可能会好奇一个.vue文件里有三个块——script setup、template和style scoped这正是Vue单文件组件的核心魅力。我们逐一解读script setup langts这是Vue 3推荐的组合式API写法setup语法糖让你以更简洁的方式编写组件逻辑langts指定使用TypeScript。template声明式的模板写入任何合法的HTMLVue的编译器会将其转化为虚拟DOM渲染函数组件中导入了HelloWorld子组件。style scoped带scoped属性的样式只作用于当前组件不会污染全局。4.4 修改代码自己的问候现在让我们动手将默认内容改成自己的“Hello Vue”。编辑App.vuescript setup langts // 这里暂时不需要逻辑 /script template div classcontainer h1{{ greeting }}/h1 p欢迎来到 Vue 3 的世界/p /div /template script langts // 我们也可以使用普通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 插值spanMessage: {{ msg }}/span双花括号内可以放入JavaScript表达式例如p{{ number 1 }}/p p{{ ok ? YES : NO }}/p p{{ message.split().reverse().join() }}/p5.2 指令指令是带有v-前缀的特殊属性其值应为JavaScript表达式。Vue提供了大量内置指令用声明式的方式完成DOM操作。v-bind动态绑定HTML属性。简写为:。img v-bind:srcimageSrc / a :hrefurl链接/av-if / v-else-if / v-else条件渲染。p v-ifscore 90优秀/p p v-else-ifscore 60及格/p p v-else不及格/pv-for列表渲染。li v-foritem in items :keyitem.id {{ item.text }} /liv-on监听DOM事件。简写为。button v-on:clickhandleClick点击我/button button clickcount增加/buttonv-model表单输入双向绑定。input v-modelusername placeholder输入用户名 / p你的用户名是: {{ username }}/p5.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。如果这篇文章帮你解决了实操上的困惑别忘记点击点赞、分享也可以留言告诉我你遇到的其它问题我会尽快回复。动手练习是掌握编程最快的方法请务必亲手敲一遍本文的所有示例代码并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源谢谢大家。
Vue.js从零到精通系列（一）：初识Vue——背景、环境与第一个应用
摘要本篇文章是《Vue.js从零到精通》系列的开篇之作我们将从Vue.js的前世今生讲起深入理解它诞生的背景、设计理念与版本演进帮助你建立对框架的宏观认知。随后我们会手把手搭建基于Vite TypeScript的开发环境创建并剖析第一个Vue应用。通过本文你将不仅学会“怎么做”更能明白“为什么这么做”为后续深入学习模板语法、组件化、路由和状态管理打下坚实基础。一、Vue.js的前世今生1.1 框架诞生的土壤前端进化简史在JavaScript诞生的最初十年前端开发主要靠手动操作DOM。jQuery的出现大幅简化了DOM操作但应用复杂度爆炸式增长后这种“命令式”的写法让代码变得难以维护。2010年后AngularJS率先将MVVMModel-View-ViewModel模式带入前端让开发者体会到数据驱动视图的便利。但AngularJS的复杂性和性能问题也暴露了出来。随后React携虚拟DOM和组件化思维横空出世改变了整个生态。正是在这样的背景下一个来自Google的华人工程师——尤雨溪Evan You决定创造一款更“轻、快、易用”的框架。1.2 尤雨溪与Vue的诞生2013年底尤雨溪在业余时间开始动手编写一个实验性项目他将AngularJS中自己最喜爱的部分如声明式模板、双向绑定提取出来并配合一套极轻量的响应式系统这就是Vue.js的雏形。2014年2月Vue.js在GitHub上首次公开当时的版本号是0.6。尤雨溪曾在采访中说Vue的设计初衷就是“我想要的工具”——一个渐进式、可以自底向上逐层应用的框架。为什么叫VueVue是法语“视图”的意思发音类似“view”。其核心定位就是视图层框架专注解决用户界面构建的问题。1.3 版本演进的三个阶段Vue 0.x ~ 1.x2014-2015初具MVVM形态拥有指令、过滤器、组件等概念但生态尚不完善。这一阶段主要吸引了喜欢AngularJS但想要更轻量方案的开发者。Vue 2.x2016-20222016年9月Vue 2.0“Ghost in the Shell”发布引入了虚拟DOM、服务端渲染、完善的组件体系和官方路由Vue Router、状态管理Vuex。这个版本让Vue真正走向主流成为GitHub上Star数增长最快的项目之一。许多耳熟能详的企业阿里巴巴、百度、小米等开始在生产环境中大规模使用Vue。Vue 3.x2020年至今2020年9月代号“One Piece”的Vue 3正式发布。底层完全重写采用TypeScript开发引入了Composition API、Proxy响应式系统、Teleport、Fragments等新特性性能大幅提升代码组织更加灵活。同时保持良好的向下兼容性通过vue/compat迁移构建。Vue 3代表了框架未来的发展方向也是本系列教程的主力版本。1.4 核心设计哲学渐进式框架Vue的最大特色是“渐进式”。你可以在已有项目中仅用Vue处理某个小部件也可以将其作为完整的单页应用SPA框架使用。它的核心库只关注视图层官方生态路由、状态管理、构建工具等则可以按需集成。这种“按需取用”的设计让Vue的学习曲线极其平滑对新手非常友好。二、为什么选择Vue2.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创建VueTypeScript项目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你会看到!doctype html html langen head meta charsetUTF-8 / link relicon typeimage/svgxml href/favicon.svg / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titlemy-vue-app/title /head body div idapp/div script typemodule src/src/main.ts/script /body /html关键点是div idapp——它将是Vue应用挂载的容器以及通过typemodule引入的main.ts这是整个应用的JavaScript入口。4.2 应用入口src/main.tsimport { createApp } from vue import App from ./App.vue import ./style.css createApp(App).mount(#app)createApp是Vue 3的核心函数用于创建一个应用实例。.mount(#app)则将Vue应用挂载到idapp的DOM元素上。整个流程非常简洁导入Vue根组件创建应用挂载到容器。4.3 根组件src/App.vue这是整个应用的起点也是所有组件的根。打开这个文件script setup langts import HelloWorld from ./components/HelloWorld.vue /script template HelloWorld / /template style scoped /style你可能会好奇一个.vue文件里有三个块——script setup、template和style scoped这正是Vue单文件组件的核心魅力。我们逐一解读script setup langts这是Vue 3推荐的组合式API写法setup语法糖让你以更简洁的方式编写组件逻辑langts指定使用TypeScript。template声明式的模板写入任何合法的HTMLVue的编译器会将其转化为虚拟DOM渲染函数组件中导入了HelloWorld子组件。style scoped带scoped属性的样式只作用于当前组件不会污染全局。4.4 修改代码自己的问候现在让我们动手将默认内容改成自己的“Hello Vue”。编辑App.vuescript setup langts // 这里暂时不需要逻辑 /script template div classcontainer h1{{ greeting }}/h1 p欢迎来到 Vue 3 的世界/p /div /template script langts // 我们也可以使用普通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 插值spanMessage: {{ msg }}/span双花括号内可以放入JavaScript表达式例如p{{ number 1 }}/p p{{ ok ? YES : NO }}/p p{{ message.split().reverse().join() }}/p5.2 指令指令是带有v-前缀的特殊属性其值应为JavaScript表达式。Vue提供了大量内置指令用声明式的方式完成DOM操作。v-bind动态绑定HTML属性。简写为:。img v-bind:srcimageSrc / a :hrefurl链接/av-if / v-else-if / v-else条件渲染。p v-ifscore 90优秀/p p v-else-ifscore 60及格/p p v-else不及格/pv-for列表渲染。li v-foritem in items :keyitem.id {{ item.text }} /liv-on监听DOM事件。简写为。button v-on:clickhandleClick点击我/button button clickcount增加/buttonv-model表单输入双向绑定。input v-modelusername placeholder输入用户名 / p你的用户名是: {{ username }}/p5.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。如果这篇文章帮你解决了实操上的困惑别忘记点击点赞、分享也可以留言告诉我你遇到的其它问题我会尽快回复。动手练习是掌握编程最快的方法请务必亲手敲一遍本文的所有示例代码并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源谢谢大家。
