一、vue的基本简介

1. 什么是vue?

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2. 渐进式框架

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

3. 单文件组件

在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。大家可以认为vue只要一个页面（一个HTML文件），页面的跳转和切换都是在这个页面上，基于路由来进行vue组件的切换。

二、怎么创建第一个vue项目

1、确保存在nodejs,可以通过npm -v测试，没有需要npm install,（如果已经安装，控制台不能使用，需要配置环境变量）

 如果没有下载通过一下代码下载：

npm install

2、 npm create vue@latest：创建一个最新版本的vue项目

 npm create vue@latest

3、cd  项目名:切换到当前项目

4、npm install(简写：install i)：在项目中安装nodejs

5、npm run dev:启动项目

6. 创建成功效果

三、项目结构解析

了解一门技术的最简单的方法就是了解项目的目录结构，这里就为大家详细的介绍一下项目结构：

 四、基础页面样式和基础内容的格式化

 打开终端打开项目网页的页面查看：

 页面并不是空的，原因是每次创建一个新项目的时候都会有自己的基础页面，我们可以把基础样式的压面内容和样式删掉，接来就带大家删除：

删除和注释后的样子：

删除App根组件的代码：

保留结构层（html底代码），样式层（css样式代码），逻辑层（te/js代码）的基本代码：

 再打开 打开终端打开项目网页的页面查看：

这样原来的页面和基础样式就被清除了。 

五、选项式 API (Options API) 和组合式 API(Composition API)

1. 基本概念

其实我相信大家看见听见选项式API和组合式API大家肯定会都会有个问题：

①这个两个到底是什么？

• 选项式 API（Options API）：是 Vue2 中主要的编程方式，在 Vue3 中也保持兼容。它通过在组件对象中定义 data、methods、computed、watch 等选项来组织代码，每个选项对应组件的不同功能模块。
• 组合式 API（Composition API）：是 Vue3 引入的新特性，以 setup 函数为入口，通过 ref、reactive、computed 等函数来创建响应式数据和逻辑，允许将相关功能的代码聚合在一起，更灵活地组织组件逻辑
• 总的来说：选项式 API（vue2：） 和组合式 API(vue3)是vue的两种不同的写法，都能通过他们来写页面，但是新技术肯定要比旧技术要好，所以我们以后还是主要学习组合式 API。

②有什么区别吗？

③都要学吗？

对于新手，可先掌握选项式 API 建立基础，再逐步学习组合式 API；对于有经验的开发者，建议重点掌握组合式 API 以充分发挥 Vue3 的优势。

2. vue的子组件的创建和页面渲染的原理

2.1 创建子组件

创建选项式子组件：

创建组合式子组件：（代码更加简介）

 2.2 单页面渲染的原理

大家仔细阅读了前面的内容应该知道vue只有一个页面，渲染的基本步骤是：

components的子组件==>App根组件==>main.ts渲染==>index页面

①子组件写入基本文字提示

②导入App.vue根组件 

 ③main.ts渲染到index

3. 选项式API示例

<template><div class="person"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template>
<script lang="ts">
export default {name: 'App',data() {return {name: '张三',age: 18,tel: '13888888888'}},methods: {changeName() {this.name = 'zhang-san'},changeAge() {this.age += 1},showTel() {alert(this.tel)}}
}
</script>
<style scoped>
</style>

4. 组合式API实例

<script setup lang="ts">import { ref } from 'vue'let name = ref('张三')let age = ref(18)let tel = ref('12345678901')function changeName() {name.value = '李四'}function changeAge() {age.value++}function showTel() {alert(tel.value)}
</script><template><h1>组合式API写法</h1><div class="person"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><style scoped></style>

运行结果：

六、总结

Vue3 作为 Vue.js 的重大更新，带来了性能的显著提升、源码的优化、更好的 TypeScript 支持以及众多新特性。在项目创建方面，Vite 作为新一代构建工具，相比 vue - cli 具有更快的启动速度和更好的开发体验，是创建 Vue3 项目的推荐选择。

通过本文的介绍，我们了解了 Vue3 的核心特性、项目创建方法、第一个应用的实现以及实际案例解析。希望这些内容能帮助你快速上手 Vue3，并在实际开发中充分发挥其优势。无论是从 Vue2 迁移到 Vue3，还是直接学习 Vue3，都能感受到它带来的便利和提升。