Vue入门：vue项目的创建和基本概念
一、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 install2、 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。
②有什么区别吗？
data、methods 等）分割，相关逻辑可能分散mixin，易产生命名冲突和来源不清问题ref、reactive），初期有一定门槛③都要学吗？
对于新手，可先掌握选项式 API 建立基础，再逐步学习组合式 API；对于有经验的开发者，建议重点掌握组合式 API 以充分发挥 Vue3 的优势。
2. vue的子组件的创建和页面渲染的原理
2.1 创建子组件
创建选项式子组件：
创建组合式子组件：（代码更加简介）
2.2 单页面渲染的原理
大家仔细阅读了前面的内容应该知道vue只有一个页面，渲染的基本步骤是：
components的子组件==>App根组件==>main.ts渲染==>index页面
①子组件写入基本文字提示
②导入App.vue根组件
③main.ts渲染到index
3. 选项式API示例
姓名：{{ name }}
年龄：{{ age }}
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) } }}
4. 组合式API实例
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) } 组合式API写法
姓名：{{ name }}
年龄：{{ age }}
运行结果：
六、总结
Vue3 作为 Vue.js 的重大更新，带来了性能的显著提升、源码的优化、更好的 TypeScript 支持以及众多新特性。在项目创建方面，Vite 作为新一代构建工具，相比 vue - cli 具有更快的启动速度和更好的开发体验，是创建 Vue3 项目的推荐选择。
通过本文的介绍，我们了解了 Vue3 的核心特性、项目创建方法、第一个应用的实现以及实际案例解析。希望这些内容能帮助你快速上手 Vue3，并在实际开发中充分发挥其优势。无论是从 Vue2 迁移到 Vue3，还是直接学习 Vue3，都能感受到它带来的便利和提升。
