Vue3是什么？

Vue 3 项目是基于 Vue.js 3（一个用于构建用户界面的渐进式 JavaScript 框架）开发的前端应用。Vue 3 是 Vue.js 的最新主要版本，于 2020 年发布，带来了许多改进和新特性，使其更高效、灵活且适合构建现代 Web 应用。

Vue 3 的核心特点

  1. Composition API（组合式 API）
    • 替代 Vue 2 的 Options API，提供更灵活的逻辑复用方式。
    • 通过 setup() 函数组织代码，将相关逻辑按功能组合，提高代码可读性和维护性。
    • 示例代码中的 <script setup> 语法是 Composition API 的简化写法。
  2. 响应式系统升级
    • 使用 Proxy 替代 Object.defineProperty，支持更全面的数据监听（如数组、动态属性）。
    • 响应式 API（如 reactive, ref, computed）让状态管理更直观。
  3. 性能优化
    • 更快的虚拟 DOM（基于编译时优化，如静态节点提升）。
    • 更小的包体积（Tree-shaking 支持，按需引入功能）。

Vue 3 项目的典型技术栈

  1. 核心库
    • Vue 3：框架核心。
    • **Vue Router **：路由管理。
    • Pinia/Vuex 4：状态管理（推荐使用 Pinia，专为 Vue 3 设计）。
  2. 构建工具
    • Vite：新一代构建工具，极速热更新（替代 Webpack）。
    • Vue CLI：传统脚手架（逐渐被 Vite 取代）。
  3. UI 框架
    • Element Plus：延续了 Element-UI 的设计语言和功能，同时全面适配 Vue 3 的新特性。
    • Vant：轻量级移动端组件库，贴近移动端交互习惯，支持主题定制。
  4. 其他工具
    • TypeScript：增强代码类型安全。
    • ESLint/Prettier：代码规范与格式化。
    • Axios：HTTP 请求库。

环境搭建

使用NVM版本管理工具

NVM（Node Version Manager） 是一个用于管理多个 Node.js 版本的工具，主要解决开发中因不同项目依赖不同 Node.js 版本而导致的兼容性问题。

  • 首先，需要把本地的node.js全部删除掉，把对应的环境卸载。

  • 然后直接安装nvm，nvm下载地址： https://nvm.uihtm.com，不需要该配置，直接，默认下载

  • 打开vscode命令行（ctrl+·(1旁边)），输入nvm确认已下载

  • 使用nvm下载指定node.js版本

    1
    nvm install 20.16.0	//版本号

  • 查看已下载的依赖

    1
    nvm list

  • 切换指定node.js版本

    1
    nvm use 20.16.0	//版本号

  • 查看当前node.js版本

    1
    node -v

使用Vite创建Vue项目

Vite 是新一代的前端构建工具，由 Vue.js 作者尤雨溪（Evan You）团队开发，旨在提供更快的开发体验和更高效的构建流程。它的核心理念是**“按需编译”，通过利用现代浏览器的原生 ES 模块（ESM）能力，彻底优化了传统构建工具（如 Webpack）在开发阶段的性能瓶颈。优点在于快速构建项目**。

Vite官服文档 https://cn.vitejs.dev/

通过查看官方文档我们了解到4种安装方法。我通常使用npm，如下

1
2
# npm 7+，需要添加额外的 --：
npm create vite@latest my-vue-app -- --template vue

此时，我们发现当前目录下多了一个项目，通过

1
cd my-vue-app	//进入项目

进入项目后，我们发现，该项目是没有node module依赖的，我们可以通过

1
npm i	//下载依赖

到这一步我们就已经创建好一个 Vite + Vue 项目了，使用下面命令可启动项目。

1
npm run dev