预计阅读时间：3 分钟
首先安装Node（如果电脑没有）
使用下面命令测试安装是否成功
node -v
npm -v
npm
对于某个项目，使用
npm init -y
初始化npm
这会产生一个文件package.json :
{
"name": "learning_npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs"
}
暂且只需保留以下部分:
{
"name": "learning_npm",
"version": "1.0.0",
"scripts": {}
}
Vite
vite是一个强大的现代前端工具
- 提供开发阶段热更新
- 把模块化的多个前端文件构建在一起，减少浏览器请求的文件数
使用如下命令安装vite：
npm install -D vite
-D 参数决定了vite只起工具作用，不参与代码组成。
这会产生
- 文件目录
node_modules package-lock.json文件- 在
npm的package.json内写入当前vite的版本号。
// 现在的package.json
{
"name": "learning_npm",
"version": "1.0.0",
"scripts": {},
"devDependencies": {
"vite": "^8.1.5"
}
}
这时，一般会手动将其改为：
{
"name": "learning_npm",
"version": "1.0.0",
// 新增三个脚本命令定义，方便后续
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^8.1.5"
}
}
这时，可以使用命令:
npm run dev # 启动项目
npm run build # 构建vite
npm run preview # 预览项目
build 命令会产生一个dist文件目录，实现上述的将模块化的前端文件构建进同一个文件
React
React把原有的根据页面设计改为了根据组件设计，即一个组件包含自己的html，css，js
安装
-
使用以下命令下载：
```bash npm install react react-dom
除此之外，还需要下载把react翻译为vite可构建的结构的工几乎
npm install -D @vitejs/plugin-react ```
-
新建文件
vite.config.js```jsx import { defineConfig } from "vite"; import react from "@vitejs/plugin-react";
export default defineConfig({ plugins: [react()], }); ```
本文由 tazume-sans 原创，转载请注明出处。