1.1 Vue是什么?
- 易学易用，性能出色，适用场景丰富的Web前端框架。
- Vue3于2020年9月18日发布，代号：One Piece海贼王
- Vue3新特性：组合式API（重点），更好的支持TypeScript（熟悉），状态存储框架Pinia（重点），新组件（了解）。。。。详见官网
- Vue2已经于2023年12月31日停止维护。建议升级到Vue.js3.0版本。打包更小，内存更少，渲染更快。vue3向下兼容vue2的语法
- 官网地址：https://vuejs.org/。中文官网https://cn.vuejs.org/
- 推荐完整学习网站：Vue3 Ajax(axios) | 菜鸟教程 (runoob.com)
1.2 整体认识Vue3项目
1.2.1 创建Vue3工程
步骤1：安装NodeJS
官网下载nodejs或nvm进行安装；
Node.js 是一个强大而灵活的运行环境，使开发者能用熟悉的JS\TS语言来构建高性能、高并发的后端服务和网络应用。
npm（Node Package Manager）则是 Node.js 的默认包管理工具，用于安装、共享和管理 JavaScript 库和工具。npm 与 Node.js 通常一起安装，使得开发者可以轻松地引入第三方模块来扩展应用功能。
步骤2：使用官方脚手架创建Vue工程
在指定工程路径下，输入如下命令：
bash
npm create vue@latest
#按照脚手架要求选择是否启用相关组件
Vue.js -The Progressive Javascript Framework
请输入项目名称：...myVue3
请输入包名称：.myvue3
是否使用Typescript语法?...否/是#选是
是否启用JSX支持?..否/是
是否引入Vue Router进行单页面应用开发?...否/是
√是否引入Pinia用于状态管理?...否/是
√是否引入vitest用于单元测试?..否/是
√是否要引入一款端到端(End to End)测试工具?,不需要
是否引入ESLint用于代码质量检测?...否/是#选是
√是否引入Prettier用于代码格式化?.否/是
Add Vue DevTools extension for debugging?(experimental)...否/是安装工程依赖，输入如下命令：
bash
npm install步骤3：启动工程
启动项目，输入如下命令：
bash
npm run dev
#VITE v5.1.6 ready in 315 ms
# Local: http://localhost:5173/
#→ Network:use--host to expose
#→press h+enter to show help点击链接即可查看到如下界面：
1、所有功能组件都可以后续手动添加。
2、在Vue中的TypeScript可以认为是在JS的基础上，增加面向对象的能力。可以定义接口、类、抽象类等。
3、npm install过程中会去node仓库下载很多依赖库，放到项目本地node_modules目录。建议将npm源设定为淘宝提供的国内镜像，可以下载快一点。
npm config get registry https://registry.npmmirror.com
4、vue2时提供了另外一个脚手架vue-cli,也可以用来创建vue3项目。但是vue-cli已经处于停止维护状态。
1.2.2 认识工程结构
.vscode：vscode ide相关配置，暂不关注
node_modules：工程依赖
Public：静态资源（图片、视频等）
**src：**源码
- index.html
这是应用程序的入口 HTML 文件，它作为整个应用的载体，通常包含基本的 HTML 结构和一个用于挂载 Vue 应用的 DOM 元素。
-
main.ts
这是 TypeScript 的入口文件，负责初始化 Vue 应用实例并将其挂载到
index.html中指定的 DOM 元素上。 -
app.vue
这是 Vue 应用的主要组件文件，通常包含应用的根组件结构、样式和逻辑，是整个应用界面的核心部分
package-json :
- **scripts：**定义运行（dev）、构建打包（build）等脚本；
- dependencies：生产环境所需的依赖。
- devDependencies：开发环境所需的依赖，例如构建工具、测试框架等。
**package-lock.json:**记录了实际安装的依赖版本和依赖树结构。
- 典型的Vue项目，都是在index.html这一个单页面里形成各种交互，这也就是所谓的SPA(Single PageApplication)
- Vue3的核心是通过createApp函数创建一个应用实例，在这个实例中构建各种应用。(main.ts中)
- 每个vue文件就是一个页面上的组件，组件可以嵌套使用。
其他vue&ts->App.vue->main.ts->index.html
- vue中的组件分为<template>页面模板，<script>脚本和<style>样式三个部分。Vue2中要求<template>下必须有一个唯一的根元素，Vue中则没有了这个限制
- npm run build：生成dist文件夹，将开发环境的代码编译、打包并生成用于生产环境的文件。这些文件通常包括优化后的 JavaScript、CSS 和静态资源，以便部署到服务器或托管平台；