一、创建Vue3.0工程

    1.使用 vue-cli 创建

    官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

    ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

    2.使用 vite 创建（推荐）

    官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

    vite官网：https://vitejs.cn

    • 什么是vite？—— 新一代前端构建工具。
    • 优势如下：
      • 开发环境中，无需打包操作，可快速的冷启动。
      • 轻量快速的热重载（HMR）。
      • 真正的按需编译，不再等待整个应用编译完成。
    • 传统构建 与 vite构建对比图
    Bundle based dev server entry ··· route route module module module module ··· Bundle Server ready Native ESM based dev server entry ··· route route module module module module ··· Server ready Dynamic import (code split point) HTTP request

    确保你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

    bun create vue@latest

    这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

    Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue-test
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » Playwright
√ 是否引入 ESLint 用于代码质量检测？ » 是，并同时引入 Oxlint 以加快检测（试验阶段）
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是

正在初始化项目 C:\Users\UserName\Projects\vue-test...

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

  cd vue-test
  bun install
  bun format
  bun dev