NPM下常用的包使用方式

---

NPM

NPM是随同NodeJS一起安装的包管理工具，包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

---

命令

nvm

nvm ls
nvm install v16.16.0
nvm uninstall v16.16.0
nvm current
nvm use v16.16.0

ncu

npm i -g npm-check-updates
ncu 
ncu -u

一、工具类

这里展示一些常用的、方便开发的一些包

1.Moment.js

Moment官方中文文档

安装

npm install moment --save   # npm
yarn add moment             # Yarn

在 Vue 中全局注册，在 main.js 中加入以下代码

// 日期时间处理
import moment from 'moment'

Vue.prototype.$moment = moment

简单使用

moment().format('MMMM Do YYYY, h:mm:ss a'); // 十一月 30日 2021, 5:07:00 下午
moment().format('dddd');                    // 星期二
moment().format("MMM Do YY");               // 11月 30日 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();                          // 2021-11-30T17:07:00+08:00

例如，用E了么UI的日期范围选择插件，取第一个日期7点到第二个日期第二天的6点的时间

let st = this.$moment(this.rangeTime[0]).format('YYYY-MM-DD 07:00:00')
let et = this.$moment(this.rangeTime[1]).add(1, 'd').format('YYYY-MM-DD 06:00:00')
// 结果：'2021-10-01 07:00:00'	'2021-10-02 06:00:00'

2.Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数

Lodash官方中文文档

3.needle

npm地址

不知道怎么说，我用的第一款可以伪造 请求头 的发送请求的模块

npm install needle

例如：

needle('get', 'https://server.com/posts/1')
  .then(function(resp) {
    // ...
  })
  .catch(function(err) {
    // ...
  });

needle.request()函数完整参数列表如下：

needle.request(method, url, data[, options][, callback])

method：请求方式，即GET,POST
url：请求url
data：请求参数
options：设置项，用来设置header等信息
callback：请求回调函数

4.clipboard

复制粘贴用的

npm install clipboard --save

<span>{{ code }}</span>
<i class="el-icon-document" title="点击复制" @click="copyCode($event, code)"/>
...
copyCode(e, text) {
  const clipboard = new Clipboard(e.target, { text: () => text })
  clipboard.on('success', e => {
    this.$message({ type: 'success', message: '复制成功' })
    // 释放内存
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', e => {
    // 不支持复制
    this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
    // 释放内存
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(e)
}

二、辅助开发

1.Chalk

控制台彩色字符插件

npm install chalk -S

可各种颜色与样式修饰符实现为函数，支持链式调用

const chalk = require('chalk');

// 函数形式
const error = chalk.bold.red;
const warning = chalk.keyword('orange');

console.log(error('Error!'));
console.log(warning('Warning!'));

// 输出蓝色
console.log(chalk.blue('Blue！'));

// 输出蓝色带下划线
console.log(chalk.blue.underline('B_l_u_e'));

// 使用RGB颜色输出
console.log(chalk.rgb(255, 182, 193).underline('RGB'));
console.log(chalk.hex('#FFB6C1').bold('HEX'));
console.log(chalk.bgHex('#FFB6C1').bold('BGHEX'));

2.Sass、Less

什么Sass、Less，不用解释了，最后都是CSS

Sass文档

Less文档

3.Eslint

两个字，规范

Eslint官方中文文档

4.nodemon

可检测目录中的文件更改，自动重新启动节点应用程序来辅助 nodejs 应用的开发

npmjs

官方文档

5.cross-env

cross-env可以让你只使用一个命令，而不用担心为不同平台操作系统设定或使用环境变量。 cross-env会正确设定。

"build": "cross-env NODE_ENV=production rollup -c"

NODE_ENV 环境变量将被设置

npmjs

三、UI组件

ElementPlus

上班用饿了么UI、下班吃饿了么外卖。我是废废的了

源码地址

文档地址

Vuetify

Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库，现代化UI

源码地址

文档地址

Naive UI

源码地址

文档地址

Ant Design

源码地址

文档地址

---

总结

总结中…