第一篇 VUE3的介绍以及搭建自己的VUE项目

VUE3的介绍

Vue.js (通常简称为 Vue) 是一个用于构建用户界面的渐进式 JavaScript 框架。它以其易学性、灵活性和高效性而广受欢迎。Vue 3 是 Vue 框架的一个主要版本更新，于 2020 年正式发布，带来了许多重要的改进和新特性。

以下是 Vue 3 的一些核心特点和介绍：

性能提升:
- 更快的渲染速度: 通过重写的虚拟 DOM 实现，优化了 diff 算法，减少了不必要的计算。
- 更小的包体积: 得益于更好的 Tree-shaking 支持（移除未使用的代码），核心库的体积显著减小。
- 优化的内存占用: 减少内存消耗，提升应用性能。
- 基于 Proxy 的响应式系统 : 使用 ES6 的 Proxy 替代 Vue 2 的 Object.defineProperty 来实现响应式数据追踪。这带来了：
  - 性能提升: 在某些场景下性能更好。
  - 消除限制 : 能够检测数组索引/长度的变化，以及直接添加/删除对象属性，不再需要 Vue.set/Vue.delete。
  - 更好的类型支持: 为 TypeScript 集成提供了更好的基础。
组合式 API: 这是 Vue 3 引入的最重要的新特性之一（也可在 Vue 2 中通过插件使用）。
- 目的 : 解决 Vue 2 中基于选项式 API (data, methods, computed, watch, lifecycle hooks 等分散在不同选项里) 在组织复杂组件逻辑时可能出现的代码分散和难以复用的问题。
- 核心 : setup() 函数。它是组合式 API 的入口点，在组件创建之前执行。
- 优势 :
  - 更好的逻辑组织和复用: 可以将与同一功能相关的代码（状态、方法、计算属性、监听器等）组织在一起，形成可复用的"逻辑关注点"。
  - 更灵活的代码组织: 不受选项位置的限制。
  - 更好的 TypeScript 支持 : setup() 函数提供了更清晰的作用域和类型推断。
- 关键函数 :
  - ref: 用于创建响应式的基本类型值（如字符串、数字）。访问其值需要通过 .value。
  - reactive: 用于创建响应式的对象。可以直接访问属性。
  - computed: 创建计算属性。
  - watch / watchEffect: 用于侦听响应式数据的变化并执行副作用。
  - onMounted, onUpdated, onUnmounted 等: 生命周期钩子函数。
一个简单的组合式 API 示例：
javascript 复制代码
```
import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0); // 响应式数据
    const double = computed(() => count.value * 2); // 计算属性

    function increment() { // 方法
      count.value++;
    }

    onMounted(() => { // 生命周期钩子
      console.log('Component is mounted!');
    });

    return { // 暴露给模板
      count,
      double,
      increment
    };
  }
}
```
更好的 TypeScript 支持: Vue 3 的代码库本身使用 TypeScript 重写，提供了更完善的类型定义。这使得在使用 TypeScript 开发 Vue 应用时，能获得更强大的类型检查、自动补全和类型推断支持。
新的内置组件:
- <Teleport>: 允许将模板的一部分内容"传送"到 DOM 树的其他位置（通常是 body 的末尾），常用于处理模态框、通知等需要脱离当前组件 DOM 层级的情况。
- <Suspense>: 提供了一种声明式的方法来处理组件树中的异步依赖（通常是异步组件）。它可以等待嵌套的异步依赖解析完成，并在等待期间显示后备内容（fallback content）。
多个根节点 (Fragments): 在 Vue 2 中，组件的模板必须有一个单一的根节点。Vue 3 支持组件模板有多个根节点（片段），提供了更大的灵活性。
改进的开发者工具集成: Vue Devtools 针对 Vue 3 进行了更新，提供了更好的开发体验和调试能力。
更强大的生态系统: Vue 3 的发布也推动了其生态系统的更新，例如：
- Vite: 一个基于原生 ES 模块的下一代前端构建工具，由 Vue 作者尤雨溪开发。它为 Vue 项目提供了极快的启动和热更新速度。
- Vue Router 4: 专为 Vue 3 设计的路由器。
- Vuex 4 / Pinia: 状态管理库。Pinia 被推荐为 Vue 的下一代状态管理库，设计上充分利用了组合式 API。
- Volar: 一个强大的 Vue 语言支持扩展，替代了之前的 Vetur，提供了更完善的 Vue 3 和 TypeScript 支持。

总结 : Vue 3 是一个重大的版本升级，它通过引入组合式 API、基于 Proxy 的响应式系统、更好的性能、更小的体积、改进的 TypeScript 支持以及新的内置组件（如 <Teleport> 和 <Suspense>），显著提升了开发体验和应用性能。它保持了 Vue 易于上手的特点，同时为构建大型、复杂应用提供了更强大的工具和更好的代码组织能力。

搭建我们的VUE项目

在创建项目之前，电脑上需要安装Node.js运行环境，这是现代前端开发的基础工具。与传统的HTML网页开发不同，Node.js提供了本地运行JavaScript的能力，而不再仅仅依赖浏览器来解析和执行代码。

具体来说，Node.js的安装带来了以下关键优势：

提供了npm/yarn等包管理工具，可以轻松安装和管理项目依赖
支持在本地运行JavaScript代码，不再局限于浏览器环境
能够执行构建工具如Webpack、Vite等，实现代码打包和优化
支持服务端渲染(SSR)等高级功能

安装步骤通常包括：

访问Node.js官网(https://nodejs.org/)下载安装包
选择LTS(长期支持)版本进行安装
在终端运行node -v和npm -v验证安装是否成功
可选安装yarn等替代包管理工具

需要注意的是，虽然浏览器仍然会最终解析和渲染HTML/CSS/JavaScript，但Node.js环境使得开发过程中的代码转换、打包和测试等环节可以在本地完成，大大提高了开发效率和项目质量。

创建VUE项目:(可使用VScode也可以使用电脑自带的小黑框进行下载步骤都是一样的)

安装Node.js

确保系统中已安装Node.js，用于运行npm或yarn命令。官网下载最新LTS版本，安装后验证版本：

bash 复制代码

node -v
npm -v

安装Vue CLI

使用npm或yarn全局安装Vue CLI工具，用于快速搭建项目：

bash 复制代码

npm install -g @vue/cli
# 或
yarn global add @vue/cli

安装后检查版本：

bash 复制代码

vue --version

创建Vue项目

通过Vue CLI创建新项目，按提示选择配置（如Babel、Router等）：

bash 复制代码

vue create project-name

或使用默认配置快速生成：

bash 复制代码

vue create -d project-name

进入项目目录

创建完成后进入项目文件夹：

bash 复制代码

cd project-name

启动开发服务器

运行以下命令启动本地开发服务器，默认端口为8080：

bash 复制代码

npm run serve
# 或
yarn serve

访问http://localhost:8080查看项目。

项目结构说明

生成的项目主要目录结构：

src/：核心代码目录，包含入口文件main.js和组件文件。
public/：静态资源如HTML模板。
node_modules/：依赖库。
package.json：项目配置和依赖管理。

可选插件安装

根据需要添加Vue Router、Vuex等插件：

bash 复制代码

vue add router
vue add vuex

生产环境构建

开发完成后，生成优化后的生产环境代码：

bash 复制代码

npm run build
# 或
yarn build

构建结果默认输出到dist/目录。