最近接触了前端代码，作为一个后端，能将其搭起来并用于生产，我感到很是欣慰。
本文纯安装速记与关键点记录，适合有一定经验且对前端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').Config} */module.exports = {content: ["./index.html","./src/**/*.{html,js,ts,jsx,tsx}"],theme: {screens: {xs: '457px',sm: '480px',md: '768px',lg: '976px',xl: '1440px',},colors:{transparent: 'transparent',current: 'currentColor',dark: 'rgba(0, 0, 0, 0.88)',primaryColor: '#13ce66','white': '#ffffff','blue': '#1fb6ff','purple': '#7e5bef','pink': '#ff49db','orange': '#ff7849','green': '#13ce66','yellow': '#ffc82c','gray-dark': '#273444','gray': '#8492a6','gray': '#8495ff','gray-light': '#d3dce6',},fontFamily: {sans: ['Graphik', 'sans-serif'],serif: ['Merriweather', 'serif'],},extend: {borderColor: '#c2c8d1',spacing: {'128': '32rem','144': '36rem',},borderRadius: {'4xl': '2rem',}},},plugins: [],
}
配置index.css
@tailwind base;
@tailwind components;
@tailwind utilities;# extra 内容:root {--border-color: #c2c8d1;--primary-color: #13ce66
}/* pc 宽度大于1200px */
@media screen and (min-width: 1200px){}/* 平板 小于1199 大于501px*/
@media screen and (max-width: 1199px) and (min-width: 501px) {}/* 手机 最大500px*/
@media screen and (max-width: 500px) {}.border-solid {border: 1px solid var(--border-color);
}
.border-radius {border-radius: 20px;
}.border-right {border: 1px solid var(--border-color);
}创建plugin vitePluginStart.ts
import type { PluginOption, ViteDevServer } from 'vite';
import colors from 'picocolors';export default function vitePluginVueMonitor (): PluginOption {return {name: 'ts-start',apply: 'serve',enforce: 'pre',configureServer(server: ViteDevServer) {const print = server.printUrls;server.printUrls = () => {const network = server.resolvedUrls?.network[0];const local = server.resolvedUrls?.local[0];if (!network && !local) {console.log(colors.red('获取IP地址失败,请检查vite.config.ts文件中server.host配置是否正确!\n'))} else {console.info(colors.green("Hello World"))print();}}}}
}
配置vite.config
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import path from 'path';
import optimizer from 'vite-plugin-optimizer'// # 控制台输出
// 注意这里千万不要使用@，因为这里还不能识别你配置文件系统路径别名
import vitePluginStart from './src/plugin/vitePluginStart.ts'export default defineConfig({plugins: [react(),optimizer({child_process: () => ({find: /^(node:)?child_process$/,code: `const child_process = import.meta.glob('child_process'); export { child_process as default }`})}),vitePluginStart(),],resolve: {alias: {'@': path.resolve(__dirname, 'src'),'@assets': path.join(__dirname, 'src/assets'),}},server: {host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址port: 5173, // 指定开发服务器端口strictPort: true, // 若端口已被占用则会直接退出open: false, // 启动时自动在浏览器中打开应用程序}
})
配置 tsconfig.json
{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"lib": ["ES2020", "DOM", "DOM.Iterable","WebWorker"],"module": "ESNext","skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx",/* Linting */"strict": true,"noUnusedLocals": false,"noUnusedParameters": false,"noFallthroughCasesInSwitch": true,"allowSyntheticDefaultImports": true,"noImplicitAny": false,"baseUrl": "./","paths": {"@/*": ["src/*"]},"types": ["vite/client", "jest", "@testing-library/jest-dom"]},"include": ["src"],"references": [{ "path": "./tsconfig.node.json" }]
}
配置 .gitignore
.DS_Store
node_modules
dist
.npmrc
.cacheyarn.lock
package-lock.jsontests/server/static
tests/server/static/upload
test/unit/coverage
test/e2e/reports.local
# local env files
.env.local
.env.*.local
.eslintcache# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
selenium-debug.log
pnpm-debug.log*# Editor directories and files
.idea
# .vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
修改 App.tsx
去掉app.css
import React from 'react'
import {ConfigProvider} from "antd";function App() {return (<><ConfigProvidertheme={{token: {colorPrimary: '#13ce66',colorBorderSecondary: '#c2c8d1',colorBgContainer: 'rgba(246,255,237,0)',},}}><button className={"bg-gray"} onClick={()=>{alert("hello world")}}>click me</button></ConfigProvider></>)
}export default App
启动框架，测试效果
pnpm start
代码规范组件 - eslint + prettier + husky
- eslint (https://github.com/eslint/eslint) JavaScript 代码检测工具，检测并提示错误或警告信息
- prettier (https://github.com/prettier/prettier) 代码自动化格式化工具，更好的代码风格效果
- husky (https://github.com/typicode/husky) Git hooks 工具, 可以在执行 git 命令时，执行自定义的脚本程序
安装
# eslint --> .eslintrc.cjs
pnpm add -D eslint eslint-config-react-app
npm init @eslint/config# Prettier prettier 是一个代码格式化工具 - prettierrc.cjs ，
pnpm add -D prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports eslint-plugin-prettier# 创建配置文件 -- 配置后谈
npm init @eslint/config
touch .eslintrc.cjs
touch .prettierrc.cjs# husky
pnpm add -D husky
pnpm pkg set scripts.prepare="husky install"
git init
pnpm prepare
npx husky add .husky/pre-commit "npm run lint"
配置 .eslintrc.cjs – eslint
- 添加.eslintrc.cjs文件
module.exports = {extends: ['react-app', 'prettier'],
};配置.prettierrc.cjs
创建.prettierrc.cjs
module.exports = {singleQuote: true,importOrder: ['^vite','^react','^antd','<THIRD_PARTY_MODULES>','components/','pages/','hooks/','utils/','^[./]',],importOrderSortSpecifiers: true,importOrderGroupNamespaceSpecifiers: true,importOrderCaseInsensitive: true
};
测试
git add .
git commit -m 'test husky'
工程测试
pnpm dev
WebAssembly - 可选
mkdir assembly
cd assembly
见笔者的另外文章 [Emscripten编译c/c++为WebAssembly]（https://juejin.cn/post/7285538670608810043)
)
】B树、B+树、B*树（6）)
