【前端开发】-- 基于nvm快速搭建项目与多项目同时开发

背景

• 为了快速响应各个前端项目，快速适应各个项目环境变化
• 为电脑更换后快速配置工作环境而准备

目标

• 快速准备本地 node 环境(多版本)
• 快速构建 web 应用
• 快速启动 web 应用（vue，react，typescript 等）

安装 Node 环境

概述

• 官网中有各种版本的 Node 版本，用户可以自行前往下载
• 如果用户自行下载安装 Node 版本将不能做版本控制
• 使用 nvm 来做 Node 下载与版本控制
• nvm 支持 mac，windows，linux

前提：请安装 nvm 前卸载本机的 Node 其他版本，会冲突

下载安装

• nvm 网站
• nvm-windows
• nvm 发布列表（下载安装即可，点点点）
• nvm 安装配置（可修改）
  • nvm 目录：C:\Users\jack.li\AppData\Roaming\nvm
  • nodejs 目录：C:\Program Files\nodejs
  • 修改源：C:\Users\jack.li\AppData\Roaming\nvm\settings.txt

  node_mirror: https://npm.taobao.org/mirrors/node/
  npm_mirror: https://npm.taobao.org/mirrors/npm/
  

• 已管理员身份打开终端 CMD

C:\Windows\system32>nvm list

  * 12.22.3 (Currently using 64-bit executable)

C:\Windows\system32>nvm install 14
Downloading node.js version 14.20.1 (64-bit)...


C:\Windows\system32>nvm list

    14.20.1
  * 12.22.3 (Currently using 64-bit executable)

C:\Windows\system32>nvm use 12.22.3
Now using node v12.22.3 (64-bit)

C:\Windows\system32>node -v
v12.22.3

C:\Windows\system32>npm -v
6.14.13

C:\Windows\system32>

• 环境已经准备妥当

快速构建 web 应用

create-vite-app

支持模板

• vue (default)
• vue-ts (experimental)
• react
• react-ts
• preact
• preact-ts
• reason-react

简单操作

$ npm init vite-app my-react-project --template react

create-vite-app has been deprecated. run npm init @vitejs/app or yarn create @vitejs/app instead.

react-scripts

支持模板

• typescript

简单操作

$ npx create-react-app my-app --template typescript

快速启动 web 应用

• 确定你需要的 node 版本

$ nvm use 12.22.3

• 安装依赖

$ npm install

• 根据 package.json 启动

$ npm start # npm run dev