所有项目可以用的插件版本号以及用途
一些好用的插件
建议安装在dependencies，使用命令 npm install xxx --save 或者 npm i xxx -S
---表示使用最新的版本 @latest
| 插件 | 版本号 | 用途 |
|---|---|---|
| animate.css | --- | css动画官方示例文档 |
| async-validator | --- | 表单验证插件 |
| axios | --- | 基于promise用于浏览器和node.js的http客户端 |
| babel-polyfill | --- | 帮助转换 ES6 代码为 ES5 |
| body-scroll-lock | --- | 页面不滚动，比较鸡肋，可能能用到，暂时记录下 |
| clipboard | --- | 将文本复制到剪贴板小插件 |
| dom-to-image | --- | html转图片和html2canvas用途是一样的，两个插件各有优缺点，所以都放着对比 |
| echarts | --- | 数据可视化，与highcharts对比 |
| js-base64 | --- | Base64转码器 |
| js-cookie | --- | 操作浏览器的cookie |
| jsoneditor | --- | 操作json格式数据 |
| jspdf | --- | PDF生成工具 |
| file-saver | --- | 文档下载 |
| font-awesome | --- | 图标字体库 |
| highcharts | --- | 数据可视化，与ECharts对比 |
| html2canvas | --- | html转图片 对比dom-to-image |
| keycode | --- | 获取键盘按键码 |
| konva | --- | Canvas的绘图JS库，支持React、Vue两种JS框架 |
| mockjs | --- | 生成模拟数据 |
| nanoid | --- | 轻便的ID生成器 |
| normalize.css | --- | css初始化（保留有用的样式，重置） |
| nprogress | --- | 超细程序进度条仿google，youtobe |
| number-precision | --- | 加减乘除的精准运算 |
| pdfjs-dist | --- | pdf在线预览插件示例 |
| qrcode | --- | 二维码生成器,对比qrious,这个更实用一点 |
| qs | --- | 查询字符串解析和字符串化库 |
| resize-observer-polyfill | --- | 检测浏览器宽高变化 |
| simplemde | --- | Markdown编辑器 |
| sortablejs | --- | 拖动排序插件 |
| swiper | --- | 滑动插件 |
| thenby | --- | 排序 |
| three | --- | WebGL轻量级的3D渲染库 |
| validator | --- | 数据验证，常规的验证方法可以在这里查找 |
| wangeditor | --- | 文档编辑器 |
| xlsx | --- | 导出excel,将数据、html转成excel导出 |
| xlsx-style | --- | 给导出的xlsx加上颜色，但是我没使用成功o(╥﹏╥)o |
| zrender | --- | 二维绘图引擎，提供 Canvas、SVG、VML 等多种渲染方式，也是 ECharts 的渲染器 |
JS框架以及相应的UI框架/插件
建议安装在dependencies，使用命令 npm install xxx --save
Vue框架
vue^2.0
| 框架 | 版本号 |
|---|---|
| vue | ^2.6.9 |
| vue-router | ^3.0.2 |
| vuex | ^3.1.0 |
多种UI框架使用最好按需加载（具体见相应的官方文档）
| UI框架/插件 | 版本号 | 用途 |
|---|---|---|
| element-ui | ^2.7.2 | 饿了么UI框架 |
| muse-ui | ^3.0.1 | Muse-UI框架 |
| svg-progress-bar | ^0.1.17 | 进度条插件 |
| vuedraggable | --- | Vue拖拽排序插件Vue.Draggable |
| vue-draggable-resizable | ^2.0.0-rc1 | 可拖动、可调整大小VueDraggableResizable 2 |
| @riophae/vue-treeselect | --- | 多层级、可多选、搜索选择框VueTreeselect |
| vue-i18n | --- | 系统多语言设置插件 |
| vue-seamless-scroll | ^1.1.12 | 无缝滚动 |
React框架
React^16
| 框架 | 版本号 | 官方文档 |
|---|---|---|
| react | ^16.8.6 | https://reactjs.org/ |
| react-app-polyfill | ^0.2.2 | |
| react-dev-utils | ^8.0.0 | |
| react-dom | ^16.8.6 | |
| react-redux | ^7.0.2 |
| UI框架/插件 | 版本号 | 用途 | 官方文档 |
|---|---|---|---|
| antd | ^3.17.0 | Ant Design UI框架 | https://ant.design/docs/react/introduce-cn |
| react-konva | ^16.8.6 | Canvas绘图Js库 | https://konvajs.org/docs/react/ |
| react-motion | ^0.5.2 | 动画库 | https://github.com/chenglou/react-motion |
| react-spring | ^8.0.19 | 基于弹簧物理的动画库 | https://www.react-spring.io/ |
打包工具的框架/插件
建议安装在devDependencies，使用命令 npm install xxx --save-dev 或者 npm i xxx -D
webpack
webpack^3.0 具体插件可在https://www.webpackjs.com/plugins/中查找 除JavaScript以外的静态资源打包，loader预处理文件在https://www.webpackjs.com/loaders/查找
| 框架 | 版本号 |
|---|---|
| webpack | ^3.12.0 |
| webpack-bundle-analyzer | ^3.1.0 |
| webpack-cli | ^3.3.0 |
| webpack-dev-server | ^2.11.3 |
| webpack-merge | ^4.2.1 |
相关插件（部分插件在webpack3和webpack4版本不相同）
| 插件 | 版本号 | 用途 |
|---|---|---|
| autoprefixer | ^7.1.2 | PostCSS插件兼容css规则 |
| babel-core | ^6.26.3 | 把 js 代码分析成 ast，AST的介绍 |
| babel-plugin-syntax-jsx | ^6.18.0 | 解析jsx语法基础插件，需要配置.babelrc文件 |
| babel-plugin-transform-runtime | ^6.23.0 | 1、当你使用 generators/async 函数时，自动引入 babel-runtime/regenerator(使用 regenerator 运行时而不会污染当前环境);2、当你使用 generators/async 函数时，自动引入 babel-runtime/regenerator(使用 regenerator 运行时而不会污染当前环境); 3、移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替(提取babel转换语法的代码)；使用在.babelrc文件中加{"plugins": ["@babel/plugin-transform-runtime"]} |
| babel-plugin-transform-vue-jsx | ^3.7.0 | 将jsx转义为render函数渲染，.babelrc中配置{"presets": ["env"],"plugins": ["transform-vue-jsx"]} |
| babel-preset-env | ^1.7.0 | 和babel-preset-es2015一起使用，根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5，指定浏览器版本/node版本 |
| babel-preset-es2015 | ^6.24.1 | 将部分ES6 语法转换为ES5 语法 |
| babel-preset-stage-2 | ^6.24.1 | 除了2以外还有 stage-0、stage-1、stage-2、stage-3,包含的插件内容不同，具体可以参照# 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3（一） |
| chalk | ^2.0.1 | 控制台输出背景以及字体颜色 |
| clean-webpack-plugin | ^2.0.1 | 重新打包时自动清理webpack打包的输出的无效的文件/目录 |
| compression-webpack-plugin | ^2.0.0 | 非常好用的压缩插件,适用于vue-cli版本2以上，查看安装vue-cli版本【PS：就是生成的.js.map/.js.gz文件】 |
| copy-webpack-plugin | ^4.6.0 | 拷贝插件，将不需要打包的文件直接复制到输出目录下 |
| css-loader | ^2.1.1 | css编译 |
| cssnano | ^4.1.10 | PostCSS的CSS优化和分解插件，打包压缩代码 |
| extract-text-webpack-plugin | ^3.0.2 | 提取css，进行样式分离打包 |
| file-loader | ^3.0.1 | 将引入的文件解析为url，并且将文件输出到输出，目录中 |
| friendly-errors-webpack-plugin | ^1.7.0 | 识别某些webpack错误并且聚合提示 |
| html-webpack-plugin | ^2.30.1 | 根据你的html文件以及相应的打包内容生成html文件到输出目录 |
| less | ^3.9.0 | css预处理语言 |
| less-loader | ^4.1.0 | less编译器 |
| node-notifier | ^5.4.0 | 任务栏通知中心发送通知、提示 |
| node-sass | ^4.11.0 | sass-loader的依赖包 |
| optimize-css-assets-webpack-plugin | ^2.0.0 | css压缩插件，可配合cssnano配置规则
image
|
| portfinder | ^1.0.20 | 获取端口，如果被占用就自动生成一个 |
| postcss-loader | ^3.0.0 | 使用当前浏览器流行度和属性支持的前缀【css浏览器兼容】 |
| rimraf | ^2.6.3 | 在window下，为node提供UNIX的rm -rf命令 |
| sass-loader | ^7.1.0 | sass编译器 |
| uglifyjs-webpack-plugin | ^1.0.0 | 压缩JavaScript插件 |
| url-loader | ^1.1.2 | 和file-loader作用类似，如果文件小于字节限制就会返回 |
针对vue项目打包的插件
vue^2.0
| 插件 | 版本号 | 用途 |
|---|---|---|
| vue-loader | ^13.7.0 | vue编译器 |
| vue-style-loader | ^3.1.2 | 在vue-loader打包的时候进行样式编译 |
| vue-template-compiler | ^2.6.10 | vue编译器与vue-loader一起安装，需要和vue包保持同步 |
eslint规则
| 插件 | 版本号 |
|---|---|
| eslint | ^4.15.0 |
| eslint-config-standard | ^10.2.1 |
| eslint-friendly-formatter | ^3.0.0 |
| eslint-loader | ^1.7.1 |
| eslint-plugin-import | ^2.7.0 |
| eslint-plugin-node | ^5.2.0 |
| eslint-plugin-promise | ^3.4.0 |
| eslint-plugin-standard | ^3.0.1 |
| eslint-plugin-vue | ^4.0.0 |
本文还有许多需要完善补充的地方，会不定时更新。
网友评论