2、项目初始化：从零搭建项目目录、配置package.json、初始化Git仓库
好，咱们正式开始动手了。
这一章，说白了就是给项目「安家」。很多新手上来就写代码，写到一半发现目录乱成一锅粥，依赖装得乱七八糟，版本也控制不住。我早期就吃过这个亏——一个项目做到后期，连自己都找不到对应的组件在哪个文件夹里。嗯，那感觉，真挺崩溃的。
所以，项目初始化这件事，别看它基础，其实决定了你后面能走多远。咱们一步步来。
2.1 项目目录结构设计
我个人习惯，在项目一开始就把目录架子搭好。不是说要一步到位，但至少骨架得清晰。你想想看，一个模板工程，核心是「复用」，目录结构如果不清晰，复用就是空谈。
下面是我常用的一个模板工程目录结构，你可以直接拿来用：
my-template-project/
├── src/ # 源代码目录
│ ├── components/ # 公共组件
│ ├── layouts/ # 布局组件
│ ├── pages/ # 页面组件
│ ├── utils/ # 工具函数
│ ├── styles/ # 全局样式
│ └── assets/ # 静态资源（图片、字体等）
├── public/ # 公共资源（不经过打包的）
├── config/ # 项目配置文件
├── scripts/ # 构建脚本
├── tests/ # 测试文件
├── docs/ # 项目文档
├── .gitignore # Git 忽略规则
├── .eslintrc.js # ESLint 配置
├── .prettierrc # Prettier 配置
├── package.json # 项目依赖与脚本
├── README.md # 项目说明
└── LICENSE # 开源协议
这里有个小细节：src 目录下我习惯按功能模块分，而不是按文件类型分。比如 components 放组件，utils 放工具函数。这样后期找东西特别快。
components 下再按业务模块划分子目录，比如 components/UserCard、components/OrderList。这样复用性更高。
2.2 配置 package.json
package.json 是项目的「身份证」。它记录了项目名称、版本、依赖、脚本等信息。我见过有人直接复制别人的 package.json 过来用，结果版本冲突搞了一整天。嗯，这里要注意，每个项目都应该有自己的 package.json。
下面是一个典型的 package.json 示例：
{
"name": "my-template-project",
"version": "1.0.0",
"description": "一个可复用的模板工程",
"main": "src/index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --fix",
"test": "jest"
},
"dependencies": {
"vue": "^3.4.0",
"vue-router": "^4.3.0"
},
"devDependencies": {
"vite": "^5.0.0",
"eslint": "^8.56.0",
"jest": "^29.7.0"
},
"keywords": ["template", "vue", "vite"],
"author": "Your Name",
"license": "MIT"
}
这里有几个关键字段，我重点说一下：
| 字段 | 作用 | 注意事项 |
|---|---|---|
name |
项目名称，用于 npm 发布 | 必须唯一，不能有大写字母 |
version |
版本号，遵循 semver 规范 | 每次发布前记得更新 |
scripts |
自定义命令，简化操作 | 命名要语义化，比如 dev/build/test |
dependencies |
运行时依赖 | 只放项目运行必需的包 |
devDependencies |
开发时依赖 | 构建工具、测试框架放这里 |
eslint 和 jest 放到了 dependencies 里，结果生产环境打包时体积大了不少。记住，只有运行时需要的才放 dependencies，其他的统统放 devDependencies。
2.3 初始化 Git 仓库
Git 是版本控制的基石。没有 Git 的项目，就像没有备份的硬盘——随时可能翻车。我建议从一开始就初始化 Git 仓库，哪怕你只是一个人开发。
操作很简单，就几步：
- 在项目根目录打开终端
- 执行
git init - 创建
.gitignore文件 - 执行
git add .和git commit -m "init: 项目初始化"
这里重点说一下 .gitignore。它告诉 Git 哪些文件不需要跟踪。比如 node_modules、dist、.env 这些，都不应该提交到仓库里。
一个标准的 .gitignore 示例：
# 依赖目录
node_modules/
# 构建输出
dist/
build/
# 环境变量
.env
.env.local
# IDE 配置
.vscode/
.idea/
# 系统文件
.DS_Store
Thumbs.db
# 日志
*.log
gitignore 模板，针对不同语言和框架都有现成的。我一般会先下载一个通用的，再根据项目需求微调。
2.4 初始化流程总结
好了，咱们把整个初始化流程串起来。说白了就是三步走：
- 第一步： 创建目录结构，把骨架搭好
- 第二步： 配置
package.json，明确依赖和脚本 - 第三步： 初始化 Git 仓库，做好版本控制
这三步做完，你的项目就有了一个稳固的起点。后面不管怎么扩展，都不会乱。
我记得有一次接手一个老项目，目录结构乱七八糟，依赖也全是过时的。我花了整整两天才理清楚。从那以后，我每个项目都严格按照这套流程来初始化。你想想看，如果一开始就规范，后面能省多少事？
下一章，咱们会深入配置开发环境，包括 ESLint、Prettier、Vite 这些工具。到时候你会发现，基础打好了，后面的配置就是水到渠成的事。