Vite 脚手架与构建
现代框架项目从脚手架开始：npm create vue@latest（Vue 官方）或 npm create vite@latest 交互式生成项目骨架，目录、配置、热更新开箱即用，不用自己从零搭建。生成后 npm install 装依赖、npm run dev 启动开发服务器。
Vite 是当下最主流的构建工具，两大核心能力：开发时利用浏览器原生 ES Module 按需编译——启动几乎秒开，改代码热更新（HMR）瞬间生效，只替换改动的那一个模块；生产构建切换到 Rollup，自动完成代码压缩、分割、Tree-shaking。
需要熟悉的目录结构：src/ 放源码（main.js 入口、App.vue 根组件）、public/ 放不经构建的静态资源、package.json 的 scripts 里是 dev/build/preview 三个常用命令。build 产物在 dist/，部署就是把这堆静态文件扔到任意静态服务器。
本节要点npm create vue@latest 生成项目；Vite 开发按需编译、HMR 秒级热更，生产用 Rollup 打包；产物 dist 部署即静态文件。
代码
# 创建项目（交互式选择要用的功能）
npm create vue@latest # Vue 官方脚手架（内置 Vite）
npm create vite@latest # 或直接建 Vite 项目（可配 React 等）
cd my-app
npm install # 安装依赖
npm run dev # 开发服务器 http://localhost:5173
npm run build # 打包 → dist 目录
npm run preview # 本地预览打包结果
# 典型目录结构：
# my-app/
# index.html 入口 HTML
# package.json 依赖与脚本
# public/ 静态资源（原样复制）
# src/
# main.js JS 入口
# App.vue 根组件
# components/ 业务组件
# router/ 路由配置
# Vite 优势：开发按需编译秒启动、HMR 极快、生产 Rollup 打包
