创建第一个Vue3项目

关联：Vue / 前端工程化 / NodeJS的安装与配置 / TypeScript核心语法

创建项目（Vite + Vue3 + TypeScript）

npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install
npm run dev

构建与产物

npm run build

构建后通常生成 dist/，用于静态部署（见 前端工程化 / Nginx）。

目录结构（看懂就能改）

• package.json：依赖与脚本入口
• node_modules/：依赖安装产物（不手改、不提交）
• public/：不参与构建的静态资源（原样拷贝）
• src/：业务源代码（组件/路由/状态/样式等）

资料

• [04 创建第一个Vue3项目.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/04%20%E5%88%9B%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AAVue3%E9%A1%B9%E7%9B%AE.pdf)
• [04 创建第一个Vue3项目.pdf](file:///d:/Archives/personal/charley-s-garden-repo/tmp/%E6%9C%BA%E5%99%A8%E4%BA%BA%E4%B8%8E%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F%E7%BB%BC%E5%90%88%E5%AE%9E%E8%B7%B5/04%20%E5%88%9B%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AAVue3%E9%A1%B9%E7%9B%AE.pdf)