NPM 整理

预计阅读时间: 4 分钟

常用 NPM 汇总

| 注:汇总一些常用的 NPM 包,以及开发查阅文档过程中发现的 NPM 包,方便查阅。

UI 组件

名称文档使用
@riophae/vue-treeselectvue-treeselect✅
@wchbrad/vue-easy-treevue-easy-tree✅
el-select-treeel-select-tree✅
el-table-virtual-scrollel-table-virtual-scroll✅
vue-infinite-scrollvue-infinite-scroll✅
vue-lazyloadvue-lazyload✅
vue-virtual-scroll-listvue-virtual-scroll-list✅
screenfullscreenfull✅
vue-drag-resizevue-drag-resize✅
vue3-digital-flopvue3-digital-flop❌
vue3-count-tovue3-count-to✅
@tanem/svg-injector@tanem/svg-injector✅
「UI 相关组件」
  • 「⛴」:汇总项目中常用 UI 相关组件。

样式

名称文档使用
sanitize.csssanitize.css✅
reset.cssreset.css✅
normalize.cssnormalize.css✅

图表

名称文档使用
echartsecharts✅
v-chartsv-charts✅
vchartvchart✅
AntVAntV✅
vis.jsvis.js✅
OpenTiny HUIChartsOpenTiny HUICharts❌
Chart.jsChart.js❌

工具

名称文档使用
browser-toolbrowser-tool✅
crypto-jscrypto-js✅
mp4boxmp4box✅
secure-lssecure-ls✅
nanoidnanoid✅
nprogressnprogress✅
dayjsdayjs✅
zxkv-areazxkv-area✅
autofit.jsautofit.js✅
big.jsbig.js✅
better-mockbetter-mock✅
lodash-eslodash-es✅
file-typefile-type✅
zipsonzipson✅
「温馨提示」
  • 「🔩」:记录项目中常用工具组件

文件处理

名称文档使用
file-saverfile-saver✅
html2canvashtml2canvas✅
read-excel-fileread-excel-file✅
write-excel-filewrite-excel-file✅
spark-md5spark-md5✅
vue-pdfvue-pdf✅
vue-qrvue-qr✅
vue-qrcodevue-qrcode✅
xlsxxlsx✅
zxkv-excel-jsonzxkv-excel-json✅
zxkv-xlsx-jsonzxkv-xlsx-json✅
js-cookiejs-cookie✅
jszipjszip✅
「温馨提示」
  • 「🚚」:记录项目中常用处理文档文件&展示数据的组件

数据处理

名称文档使用
AxiosAxios✅
QsQs✅
vue-jsonpvue-jsonp✅
vuex-persistvuex-persist✅
vuex-persistedstatevuex-persistedstate✅
pinia-plugin-persistpinia-plugin-persist✅
pinia-plugin-persistedstatepinia-plugin-persistedstate✅
「温馨提示」
  • 「❤️」:记录项目中常用数据状态持久化存储组件&网络请求组件

编辑器

名称文档使用
@wangeditor/editorwangeditor✅
@wangeditor/editor-for-vuewangeditor-vue✅
wangEditor-nextwangEditor-next✅
markdown-itmarkdown-it✅
AIEditorAIEditor❌
Editor.mdEditor.md❌
SimditorSimditor❌
QuillQuill❌
CkeditorCkeditor❌
TinyTiny❌
TinyMCETinyMCE❌
KindEditorKindEditor❌
SummernoteSummernote❌
Slate.jsSlate.js❌
Editor.jsEditor.js❌
Draft.jsDraft.js❌
StackEditStackEdit❌
TiptapTiptap❌
TrixTrix❌
EditorEditor❌
ProseMirrorProseMirror❌
Sir TrevorSir Trevor❌
Jodit EditorJodit Editor❌
Fluent EditorFluent Editor❌
「温馨提示」
  • 「📢」:可根据自身项目实际需求选择符合自己需求的编辑器

播放器

名称文档使用
xgplayer(v2)xgplayer_v2✅
xgplayer(v3)xgplayer_v3❌
TcplayerTcplayer✅
aliplayeraliplayer✅
webrtc-streamerwebrtc-streamer✅
FLV Playerflv.js✅
Video Playervideojs❌
MuiPlayerMuiPlayer❌
DPlayerDPlayer✅
ArtPlayerArtPlayer❌
QierPlayerQierPlayer❌
MediaElement.jsMediaElement.js❌
ClapprClappr❌
GriffithGriffith❌
ChimeeChimee❌
OplayerOplayer❌
OpenplayerjsOpenplayerjs❌
SopplayerSopplayer❌
「状态简介」
  • 「✅」:在项目开发中使用过
  • 「❌」:未在项目中使用

包管理工具

名称文档使用
npmnpm✅
npxnpx✅
cnpmcnpm✅
YarnYarn✅
pnpmpnpm✅
BunBun✅
lernalerna❌
donedone❌

构建工具

名称文档使用
webpackwebpack✅
Vue CliVue Cli✅
ViteVite✅
esbuildesbuild✅
RspackRspack✅
RsbuildRsbuild✅
FarmFarm✅
RollupRollup❌

静态站点生成器

名称文档使用
RspressRspress✅
VitePressVitePress✅
VuePressVuePress✅
HexoHexo✅