1、Vue 3 （2024 版）基础笔记 - 创建 Vue 项目

好记性不如烂笔头，本着完善笔记和温习的目的，我重写 Vue 3 的笔记并以图书的形式进行记录。本次记录大多都以代码的形式进行记录。对于知识的讲解较少。

在开始之前，请确保你的电脑已经安装了 node。

有些可能没有记录对，后续有遇到时，会以翻外篇在此系列中进行补写。

准备工作

安装你的 Node。

$ node -v
v20.11.1

$ npm -v
10.2.4

创建 Vue 3 项目

1、创建项目

$ npm create vue@latest

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称： … learn-vue3
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是

正在初始化项目 /home/web/vue/2024/learn-vue3...

项目初始化完成，可执行以下命令：

  cd learn-vue3
  npm install
  npm run dev

2、启动项目

$ cd learn-vue3/
$ npm install

$ npm run dev
  VITE v5.2.8  ready in 296 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

浏览器中访问 http://localhost:5173/。

开发工具

• vscode + Vue - Official 插件