创建前端项目
本页是前端初始化主线的起点，先把目录、包管理配置和最小 Vite 入口固定下来。后面的 Tailwind、图标、主题和 API 调用都建立在这一套前端项目骨架上。
这篇教程解决什么
- 新前端项目从什么目录开始。
- 为什么这里选择 Vite + TypeScript 作为最小教程骨架。
- 项目级 npm 源应该在什么时候写进仓库。
前置条件
- 已阅读 前端初始化。
- 本地已安装
Node.js与pnpm。 - 你准备在当前仓库维护配套代码。
配套代码
- 当前样例：frontend-starter
- 当前关注文件：package.json
- 当前关注文件：vite.config.ts
- 当前关注文件：.npmrc
我们要做的事
- 固定前端样例目录。
- 建立最小 Vite + TypeScript 项目。
- 把项目级 npm 源显式写进仓库。
操作步骤
- 创建前端样例根目录：
mkdir -p samples/tutorials/frontend-starter
cd samples/tutorials/frontend-starter
- 先写入项目级 npm 源配置：
registry=https://npm.feinian.net
- 新建最小前端项目文件：
pnpm create vite . --template vanilla-ts
- 对照最终样例，确认此时最关键的文件应该是：
samples/tutorials/frontend-starter/
├── .npmrc
├── package.json
├── tsconfig.json
├── vite.config.ts
├── index.html
└── src/
├── main.ts
└── app.css
- 如果你不是从
pnpm create vite开始，也至少要把 package.json 和 vite.config.ts 的结构补齐。
验证结果
- 前端项目目录已经固定。
.npmrc已经把项目级包源写入仓库。- 你已经有一套可继续承接 Tailwind、图标和主题的最小项目骨架。
环境说明
- 教程默认使用项目级 npm 源
https://npm.feinian.net。 - 继续下一篇前，请先确认该源已经同步
tailwindcss、@tailwindcss/vite、vite、typescript和@fortawesome/fontawesome-free这些教程依赖。