| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 常用第三方包汇总(持续更新) -> 正文阅读 |
|
[JavaScript知识库]常用第三方包汇总(持续更新) |
目录 1.9.1 amfe-flexible 动态设置 REM 基准值 1.11 lodash JavaScript 实用工具库(防抖优化组件) 1.12 json-bigint处理大数字(超过js精度的数字)问题 1.16 excel导出 xlsx file-saver 和 script-loader 2.6.1 @hapi/joi表单中携带的每个数据项,定义验证规则 2.6.2 @escook/express-joi实现自动对表单数据进行验证的功能 1 前端开发常用第三方包1.1 moment日期处理(1) 安装 npm install moment (2) 使用文档 http://momentjs.cn/docs/ 1.2 then-fs读取文件内容(1) 安装 npm install then-fs (2) 基本使用 ?import thenFs from 'then-fs' ?thenFs.readFile('./files/1.txt', 'utf8').then((r1) => {console.log(r1)}) 1.3 webpack打包代码(1) 安装 yarn add webpack webpack-cli -D (2) 基本功能
(3) 基本使用
(4) webpack-入口和出口配置
1.3.1 加载器(1) style-loader 和 css-loader
(2) less 和 less-loader 处理less文件
(3) url-loader 和 file-loader处理图片文件(webpack5版本不需要安装第三方包)
(4) babel-loader @babel/core @babel/preset-env让webpack对高版本 的js代码, 降级处理后打包
1.3.2 插件(1) html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js
1.3.3 webpack-dev-server自动刷新(1) 基本使用: 启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问 (2) 安装 yarn add webpack-dev-server -D (3) 配置(package.json) ?scripts: { ? "build": "webpack", ? "serve": "webpack serve" ? } 配置(webpack.config.js) ?module.exports = { ? ? ?// ...其他配置 ? ? ?devServer: { ? ? ? ?open: true, ? ? ? ?port: 3000 // 端口号 ? ? } ?} 1.4 axios发送ajax请求的库(1) 安装 npm install axios (2) 基本使用 axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, params: { // 拼接到请求行的参数, get请求的参数 xxx: xxx } }).then(res => { console.log(res.data) // 后台返回的结果 }).catch(err => { console.log(err) // 后台报错返回 }) 1.5 bootstrap前端开发框架(1) 安装 yarn add bootstrap (2) main.js引入
(3) 具体使用: 详见文档 1.6 vue-routerr路由系统(1) 安装 yarn add vue-router (2) 基本使用(main.js或单独router文件)
1.7 vant组件库,移动端开发框架(1) 安装 npm i vant -D (2) 导入使用(全局导入) import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); (3) 具体使用: 详见文档 1.8 postcss postcss-pxtorem(1) 介绍 postcss(配合webpack翻译css代码) postcss-pxtorem(配合webpack, 自动把px转成rem) (2) 安装 yarn add postcss postcss-pxtorem@5.1.1 (3) 配置
1.9 移动端REM适配包1.9.1 amfe-flexible 动态设置 REM 基准值(1) 安装 yarn add amfe-flexible / npm i amfe-flexible (2) 导入(main.js) import 'amfe-flexible' 1.9.2 postcss-pxtorem 将 (1) 安装 yarn add -D postcss-pxtorem / npm install postcss-pxtorem -D (2) 配置(项目根目录创建 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } } (3) 注意 该插件**不能转换行内样式中的 `px 1.10 dayjs处理相对时间(1) 安装 npm i dayjs (2) 基本使用 import dayjs from 'dayjs' import 'dayjs/locale/zh-cn' dayjs.locale('zh-cn') console.log(dayjs().format('YYYY-MM-DD')) (3) 导入(main.js) import './utils/dayjs' (4) 定义过滤器 import Vue from 'vue' import dayjs from 'dayjs' // 加载中文语言包 import 'dayjs/locale/zh-cn' import relativeTime from 'dayjs/plugin/relativeTime' // 配置使用处理相对时间的插件 dayjs.extend(relativeTime) // 配置使用中文语言包 dayjs.locale('zh-cn') // 全局过滤器:处理相对时间 Vue.filter('relativeTime', value => { return dayjs().to(dayjs(value)) }) 1.11 lodash JavaScript 实用工具库(防抖优化组件)(1) 安装 yarn add lodash / npm i lodash (2) 防抖按需导入 import { debounce } from "lodash" (3) 基本使用 // debounce 函数 // 参数1:函数 // 参数2:防抖时间 // 返回值:防抖之后的函数,和参数1功能是一样的 handler: debounce(function (val) { this.loadSearchSuggestion(val) }, 1000) (4) lodash还集成了其余很多功能,具体可见其官网地址: https://www.lodashjs.com/ 1.12 json-bigint处理大数字(超过js精度的数字)问题(1) 安装 npm i json-bigint (2) 基本使用
(3) 处理服务器返回的大数字(axios为例)
(4) 扩展 ES2020 BigInt ES2020 引入了一种新的数据类型 BigInt(大整数),来解决这个问题。BigInt 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。参考链接:
1.13 cropperjs 图片裁切(1) 安装 npm install cropperjs (2) 引入css js(main.js) import 'cropperjs/dist/cropper.css' import Cropper from 'cropperjs' (3) 在mounted中初始化(vue生命周期)
(4) 配置cropperjs
(5) 裁切方式一:服务端
(6) 裁切方式二:客户端 confirm () { // console.log(this.cropper.getData()) this.cropper.getCroppedCanvas().toBlob(blob => { console.log(blob) }) } 1.14 element-ui 前端开发框架(pc端常用)(1) 安装 npm i element-ui -S (2) 全局引入(main.js) import ElementUI from 'element-ui' // 引入css样式 import 'element-ui/lib/theme-chalk/index.css' // 全局注册组件 Vue.use(ElementUI) (3) 按需引入
(4) 具体使用 详见官网:https://element.eleme.cn/#/zh-CN/ 1.15 xlsx excel导入(1) 安装 npm i xlsx (2) 具体使用
(3) 外部引用组件
1.16 excel导出 xlsx file-saver 和 script-loader(1) 安装 npm install xlsx file-saver -S npm install script-loader -S -D (2) 基本使用 import('@/vendor/Export2Excel').then(excel => { excel.export_json_to_excel({ header: tHeader, //表头 必填 data, //具体数据 必填 filename: 'excel-list', //非必填 autoWidth: true, //非必填 bookType: 'xlsx' //非必填 }) }) (3) 参数介绍 参数
1.17 cos-js-sdk-v5上传文件(图片上传)(1) 安装 npm i cos-js-sdk-v5 --save (2) 具体使用 参见element-ui upload组件 1.18 qrcode生成二维码(1) 安装 npm i qrcode (2) 基本用法 QrCode.toCanvas(dom, info) (3) 具体使用
1.19 vue-print-nb打印(1) 安装 npm i vue-print-nb (2) 导入(main.js) import Print from 'vue-print-nb' Vue.use(Print) (3) 基本使用 <el-row type="flex" justify="end"> <el-button v-print="printObj" size="small" type="primary">打印</el-button> </el-row> printObj: { id: 'myPrint' } 1.20 echarts可视化图表(1) 安装 npm i echarts (2) 全局引入 import * as echarts from 'echarts' (3) 基本使用
1.21 screenfull全屏插件(1) 安装 npm i screenfull (2) 导入 import ScreenFull from 'screenfull' (3) 基本使用
1.22 vue-i18n 国际化包(1) 安装 npm i vue-i18n (2) 新建lang/index.js
(3) main.js 挂载 // 设置element为当前的语言 Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) }) new Vue({ el: '#app', router, store, i18n, render: h => h(App) }) (4) 具体使用$t(key) key表示语言包中的属性名 2 node.js后端开发第三方包2.1 ExpressWeb 开发框架(1) 官网地址 http://www.expressjs.com.cn/ (2) 作用: 快速搭建搭建web网站服务器和api接口服务器 (3) 基本使用 const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) 2.2 express-session(1) 基本使用(中间件在Express中使用 Session认证)
2.3 express-jwt(1) 基本使用(在Express中使用 JWT) (2) 安装 npm install jsonwebtoken express-jwt
2.4 cors配置跨域(1) 安装 npm i cors@2.8.5 (2) 导入并配置 cors 中间件 // 导入 cors 中间件 const cors = require('cors') // 将 cors 注册为全局中间件 app.use(cors()) 2.5 bcryptjs加密处理(1) 安装 npm i bcryptjs@2.4.3 (2) 导入const bcrypt = require('bcryptjs') (3) 使用
2.6 表单验证第三方包2.6.1 @hapi/joi表单中携带的每个数据项,定义验证规则(1) 安装 npm install @hapi/joi@17.1.0 (2) 导入 const joi = require('@hapi/joi') (3) 常用校验方法
(4) 使用
2.6.2 @escook/express-joi实现自动对表单数据进行验证的功能(1) 安装 npm i @escook/express-joi (2) 导入 const expressJoi = require('@escook/express-joi') (3) 使用 router.post('/reguser', expressJoi(reg_login_schema), userHandler.regUser) // reg_login_schema为@hapi/joi校验规则模组,userHandler.regUser为导入用户路由处理函数模块 2.7 multer解析表单数据(1) 安装 npm i multer (2) 基础使用 // 导入解析 formdata 格式表单数据的包 const multer = require('multer') // 导入处理路径的核心模块 const path = require('path') // 创建 multer 的实例对象,通过 dest 属性指定文件的存放路径 const upload = multer({ dest: path.join(__dirname, '../uploads') }) // 发布新文章的路由 // upload.single() 是一个局部生效的中间件,用来解析 FormData 格式的表单数据 // 将文件类型的数据,解析并挂载到 req.file 属性中 // 将文本类型的数据,解析并挂载到 req.body 属性中 router.post('/add', upload.single('cover_img'), article_handler.addArticle) |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 | -2024/12/26 16:49:04- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |