Vite + React + tailwindcss + ts + 多Nodejs环境... 速搭

最近接触了前端代码，作为一个后端，能将其搭起来并用于生产，我感到很是欣慰。

本文纯安装速记与关键点记录，适合有一定经验且对前端React及生态有一些小了解，想要快速的将一个框架搭建起来的童鞋。可当成一个指引。

Node.js环境安装

本地搭建可支持多个Node.js版本切换的工具。这里笔者使用的工具是NVM。该工具支持多种操作系统，目前以windoows为例来说明。

tip: NVM用于切换多个node版本，比node要先安装，后面node由nvm来安装。

NVM安装

进入官网http://nvm.uihtm.com/ 下载

解压下载，双击安装

检查装情况, 在控制台输入 nvm version，有版本输出即说明安装成功。

nvm version

# ---
# Running version 1.1.10.

tip: 安装之后，会自动生成两个环墒变量: NVM_HOME和NVM_SYNLINK, 指定安装路径以及Node关联路径。

用nvm安装nodejs

# 查询可获得的版本列表
nvm list available  

# 安装指定版本的node
nvm install node16
nvm install node18
nvm install node2?

注意事项： 一定要先安装nvm，如果后端版本切换会不成功，请多试几次，比如卸掉node重来一遍。

常用功能

列出在用版本

nvm list 

# 带*号和"Currently ...)为当前在用nodejs
# 控制台输出  
# 18.18.0  
# * 16.20.2 (Currently using 64-bit executable)  
#  14.21.3  

版本切换

nvm use 16

# 切换到第 16版

前端框架速搭

起步: node > pnpm + yarn

# 工具

npm i -g pnpm yarn typescirpt
pnpm create vite my-react-app --template react-ts
cd my-react-app
pnpm install

笔记最爱yarn，目前pnpm性能高出好几倍，所以两个会一起用。

必备组件

安装

#ant-design 
pnpm add antd @ant-design/icons

### atailwind css
pnpm add -D tailwindcss postcss autoprefixer 
npx tailwindcss init 

## 
pnpm i crypto-js 
pnpm i axios
pnpm i react-redux react-router-dom 

## 优化器与path
pnpm i vite-plugin-optimizer path -D

## 改变控制台颜色 -- 用于vitePluginStart.ts插件-在控制打印输出Ascii图
pnpm i picocolors

配置-tailwind.config.js

/** @type {import('tailwindcss')