一、原生 JavaScript 项目无框架H5 / 静态页面1. 基础工具库dayjs时间处理替代笨重 moment 安装cdn 引入htmlscript srchttps://cdn.jsdelivr.net/npm/dayjs1.11.10/dayjs.min.js/script使用dayjs().format(YYYY-MM-DD)lodash-es / lodash通用工具函数 CDNhtmlscript srchttps://cdn.jsdelivr.net/npm/lodash4.17.21/lodash.min.js/script常用深拷贝_.cloneDeep、防抖_.debounceaxios网络请求htmlscript srchttps://cdn.jsdelivr.net/npm/axios1.7.7/dist/axios.min.js/script2. 常用功能库crypto-js前端加密 MD5/AESclipboard.js复制粘贴xlsx (sheetjs)Excel 导入导出echarts图表可视化lottie-webAE 动画渲染socket.io实时聊天、消息推送3. 原生项目完整引入示例html!-- 工具 -- script srclodash.min.js/script script srcdayjs.min.js/script !-- 请求 -- script srcaxios.min.js/script !-- 图表 -- script srcecharts.min.js/script二、Vue3 项目Vite 构建企业后台 / H5 移动端1. 核心框架生态必装# 路由 npm install vue-router4 # 状态管理官方推荐 npm install pinia # http请求 npm install axios2. 通用工具库# 时间处理 npm install dayjs # 工具函数 npm install lodash npm install -D types/lodash # ts项目类型提示 # 表单校验 npm install zod3. UI 组件库二选一PC 后台管理Element Plusnpm install element-plus移动端 H5Vant4npm install vant4. 图表 / 文件 / 动画# 图表 npm install echarts vue-echarts # Excel导出导入 npm install xlsx # 动画 npm install gsap # 多语言国际化 npm install i18next vue-i18next5. Vue3 最简 main.ts 引入示例typescriptimport { createApp } from vue import App from ./App.vue import router from ./router import { createPinia } from pinia import ElementPlus from element-plus import axios from axios import dayjs from dayjs import _ from lodash const app createApp(App) app.config.globalProperties.$axios axios app.config.globalProperties.$dayjs dayjs app.config.globalProperties.$lodash _ app.use(router).use(createPinia()).use(ElementPlus).mount(#app)三、React 项目Vite/CRA后台管理 / 官网1. 核心生态库必装# 路由 npm install react-router-dom # 状态管理任选其一 npm install zustand # 轻量首选 # npm install redux react-redux reduxjs/toolkit # 大型项目 # http请求 npm install axios2. 工具、时间、校验npm install dayjs npm install lodash npm install zod # 表单校验3. UI 组件库二选一企业后台Ant Designnpm install antd谷歌风格MUInpm install mui/material emotion/react emotion/styled4. 图表、文件、动画# React封装Echarts npm install echarts echarts-for-react # Excel npm install xlsx # 动画 npm install gsap # 国际化 npm install react-i18next i18next5. React 全局 axios 封装示例typescript// src/utils/request.ts import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截 service.interceptors.request.use(config { config.headers.token localStorage.getItem(token) return config }) // 响应拦截 service.interceptors.response.use(res res.data) export default service补充Node.js 后端必备库Express/Koa/NestExpress 极简后端依赖# 框架 npm install express # 跨域 npm install cors # 解析参数 npm install body-parser # 文件上传 npm install multer # 数据库 mysql npm install mysql2 # mongodb npm install mongoose # 身份验证 npm install jsonwebtoken # 参数校验 npm install joiNestJS企业级 TS 后端# 数据库 npm install nestjs/typeorm typeorm mysql2 # jwt授权 npm install nestjs/jwt nestjs/passport passport-jwt # 校验 npm install class-validator class-transformer选型快速建议静态 H5 页面CDN 引入 dayjs lodash axios echartsVue3 后台管理Element Plus Pinia VueRouter dayjs axiosReact 中台项目Ant Design Zustand ReactRouter ZodNode 后端接口服务Express mysql2 jwt multer
三套项目必备 JS 库完整清单（含用途、安装引入、适用场景）
一、原生 JavaScript 项目无框架H5 / 静态页面1. 基础工具库dayjs时间处理替代笨重 moment 安装cdn 引入htmlscript srchttps://cdn.jsdelivr.net/npm/dayjs1.11.10/dayjs.min.js/script使用dayjs().format(YYYY-MM-DD)lodash-es / lodash通用工具函数 CDNhtmlscript srchttps://cdn.jsdelivr.net/npm/lodash4.17.21/lodash.min.js/script常用深拷贝_.cloneDeep、防抖_.debounceaxios网络请求htmlscript srchttps://cdn.jsdelivr.net/npm/axios1.7.7/dist/axios.min.js/script2. 常用功能库crypto-js前端加密 MD5/AESclipboard.js复制粘贴xlsx (sheetjs)Excel 导入导出echarts图表可视化lottie-webAE 动画渲染socket.io实时聊天、消息推送3. 原生项目完整引入示例html!-- 工具 -- script srclodash.min.js/script script srcdayjs.min.js/script !-- 请求 -- script srcaxios.min.js/script !-- 图表 -- script srcecharts.min.js/script二、Vue3 项目Vite 构建企业后台 / H5 移动端1. 核心框架生态必装# 路由 npm install vue-router4 # 状态管理官方推荐 npm install pinia # http请求 npm install axios2. 通用工具库# 时间处理 npm install dayjs # 工具函数 npm install lodash npm install -D types/lodash # ts项目类型提示 # 表单校验 npm install zod3. UI 组件库二选一PC 后台管理Element Plusnpm install element-plus移动端 H5Vant4npm install vant4. 图表 / 文件 / 动画# 图表 npm install echarts vue-echarts # Excel导出导入 npm install xlsx # 动画 npm install gsap # 多语言国际化 npm install i18next vue-i18next5. Vue3 最简 main.ts 引入示例typescriptimport { createApp } from vue import App from ./App.vue import router from ./router import { createPinia } from pinia import ElementPlus from element-plus import axios from axios import dayjs from dayjs import _ from lodash const app createApp(App) app.config.globalProperties.$axios axios app.config.globalProperties.$dayjs dayjs app.config.globalProperties.$lodash _ app.use(router).use(createPinia()).use(ElementPlus).mount(#app)三、React 项目Vite/CRA后台管理 / 官网1. 核心生态库必装# 路由 npm install react-router-dom # 状态管理任选其一 npm install zustand # 轻量首选 # npm install redux react-redux reduxjs/toolkit # 大型项目 # http请求 npm install axios2. 工具、时间、校验npm install dayjs npm install lodash npm install zod # 表单校验3. UI 组件库二选一企业后台Ant Designnpm install antd谷歌风格MUInpm install mui/material emotion/react emotion/styled4. 图表、文件、动画# React封装Echarts npm install echarts echarts-for-react # Excel npm install xlsx # 动画 npm install gsap # 国际化 npm install react-i18next i18next5. React 全局 axios 封装示例typescript// src/utils/request.ts import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截 service.interceptors.request.use(config { config.headers.token localStorage.getItem(token) return config }) // 响应拦截 service.interceptors.response.use(res res.data) export default service补充Node.js 后端必备库Express/Koa/NestExpress 极简后端依赖# 框架 npm install express # 跨域 npm install cors # 解析参数 npm install body-parser # 文件上传 npm install multer # 数据库 mysql npm install mysql2 # mongodb npm install mongoose # 身份验证 npm install jsonwebtoken # 参数校验 npm install joiNestJS企业级 TS 后端# 数据库 npm install nestjs/typeorm typeorm mysql2 # jwt授权 npm install nestjs/jwt nestjs/passport passport-jwt # 校验 npm install class-validator class-transformer选型快速建议静态 H5 页面CDN 引入 dayjs lodash axios echartsVue3 后台管理Element Plus Pinia VueRouter dayjs axiosReact 中台项目Ant Design Zustand ReactRouter ZodNode 后端接口服务Express mysql2 jwt multer
