准备工作
创建项目
创建项目或者说创建一个软件包（后续不再区分项目、软件包），在实际开发中可能有一些技术方案提供创建项目的命令。这里从最简单的空项目开始。
打开终端，通过命令创建一个项目
npm 示例
npm init
根据提示进行创建即可。
yarn 示例
yarn init
根据提示进行创建即可。
pnpm 示例
pnpm init
bun 示例
bun init
通过以上任意一个命令，创建完成后，发现多了一个 package.json 文件，这个package.json 文件所在的目录被称为一个项目。
package.json 文件示例
{
"name": "pnpm-demo-01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
项目依赖
我们可以给现有项目添加依赖，现在尝试下载 vite 作为项目的依赖。
npm 示例
npm install -D vite
依赖安装完成时，项目多了一个 node_modules 目录和一个 package-lock.json 依赖的版本锁定文件。
yarn 示例
yarn add -D vite
依赖安装完成时，项目同样多了一个 node_modules 目录，同样多了版本锁定文件，只是名称不一样，这回是 yarn.lock。
pnpm 示例
pnpm add -D vite
依赖安装完成时，项目同样多了一个 node_modules 目录，同样多了版本锁定文件，只是名称不一样，这回是 pnpm-lock.yaml。
bun 示例
bun add -D vite
bun在项目创建时，就已经存在部分依赖，同样是 node_modules 目录，版本锁定文件是 bun.lock。
项目启动
在项目所在目录下，新建文件 index.html，添加代码 <h1>hello world!</h1>
<h1>hello world!</h1>
启动项目
npm 示例
npx vite
pnpm 示例
pnpm vite
yarn 示例
yarn vite
bunx 示例
bunx vite
打开浏览器访问控制台输出的连接 http://localhost:5173，即可查看程序效果。
VITE v6.1.1 ready in 229 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
时间关系，这篇文章比较水。暂时还没考虑好怎么讲好web开发这件事，算是一个开头吧。
