这篇文章记录一些 NPM 在日常使用的过程中遇到的一些问题和使用心得。
npm -v
Usage: npm <command>
where <command> is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
clean-install, clean-install-test, completion, config,
create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
edit, explore, get, help, help-search, hook, i, init,
install, install-ci-test, install-test, it, link, list, ln,
login, logout, ls, org, outdated, owner, pack, ping, prefix,
profile, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, team, test, token, tst, un,
uninstall, unpublish, unstar, up, update, v, version, view,
whoami
npm <command> -h quick help on <command> npm -l display full usage info npm help <term> search for help on <term> npm help npm involved overview
更换阿里镜像
npm config set registry https://registry.npm.taobao.org
查看镜像地址
npm config get registry
初始化项目
npm init目的是生成package.json文件，一直按回车就行
该命令会询问你这个项目的基本信息，比如项目名、作者、描述、Git仓库等，如果你不想敲回车，也可以直接使用
npm init -y
安装包（先cd到包所在目录）
npm install（等价于 npm i）
示例
npm install axios -S（-S 等效 --save，加入正式依赖dependencies） npm install less （不带参数，默认会加入正式依赖dependencies） npm install sass --save-dev （等效 -D，会加入开发依赖devDependencies） npm install 模块名 -g 全局安装（不加g则默认本地安装）
更多instal命令：
npm install (with no args, in package dir) npm install [<@scope>/]<pkg> npm install [<@scope>/]<pkg>@<tag> npm install [<@scope>/]<pkg>@<version> npm install [<@scope>/]<pkg>@<version range> npm install <folder> npm install <tarball file> npm install <tarball url> npm install <git:// url> npm install <github username>/<github project>
【文件引用】
存放位置：
将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
文件使用：
可以通过 require() 来引入本地安装的包
【命令行使用】
存放位置：
将安装包放在 /usr/local 下或者你 node 的安装目录。
文件使用：
可以直接在命令行里使用。
如果你希望具备两者功能，则需要在两个地方安装它或使用 npm link。
npm run build
执行的是package.json里的scripts脚本里对应的命令（快捷方式），一般执行的是“node build/build.js”
打包成功后，会在dist目录下生成index.html和static文件夹等，把它们复制到HTTP项目目录下吧。
npm run start
package.json里的scripts脚本里需配置start快捷方式。
查看项目中模块所在的目录
npm root
查看全局安装的模块所在目录
npm root -g
查看某个包对于各种包的依赖关系
npm view 模块名 dependencies
更新node模块
npm update 模块名
当然你也可以update 该模块到指定版本
npm update 模块名 @版本号
如果安装到最新版本可以使用以下命令
npm install 模块名@latest
卸载node模块
npm uninstall 模块名
搜索模块
npm search express
显示包信息
npm view vue
列出依赖项
npm ls
限制依赖项的层级
npm ls --depth=0
npm install --save lodash //轻量级的JavaScript工具函数库
npm install --save-dev webpack-dev-server //使用webpack构建本地服务器
启动服务器时，如果出错：Module not found: Error: Can't resolve 'webpack/hot'，那么需要在项目目录下安装webpack：
npm install webpack（不加-g）
// 安装Babel
npm install --save-dev babel-core@6 babel-loader@7 babel-preset-env babel-preset-react
// 安装css-loader 和 style-loader
npm install --save-dev style-loader css-loader
webpack——devtool里的7种SourceMap模式
开发环境推荐：
cheap-module-eval-source-map
生产环境推荐：
cheap-module-source-map
安装 Webpack
npm install webpack -g
npm install webpack-cli -g
打包
webpack 1.js 2.js --output bundle.js
webpack-cli src/index.js --output dist/bundle.js
* 安装vue-cli
npm install -g @vue/cli
# 创建一个项目
vue create hello-world
* 安装vant
npm i vant -S
* 安装自动按需引入插件
npm i babel-plugin-import -D
然后在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
* 导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件
* 安装必要的组件
npm install axios -S
# 创建一个项目
vue create hello-world
出现Please pick a preset:
> default (babel, eslint) //默认（默认选这个）
> Manually select features //手动选择功能
# 安装 avue
npm i @smallwei/avue -S
# 调试运行本地服务器
npm run serve
# 打包-生产
npm run build
打包时的低版本安卓手机兼容问题：
* vue-cli 打包时 js 转es5，兼容低版本手机；
AVUE BUG？:
后台的图片路径是字符串形式的时候，当不上传任何图片时，提交的是空数据（null），上传图片后，提交的是字符串，所以后台处理的时候要特别处理这个NULL值。
{
label: "图片",
prop: "filepaths",
type: "upload",
accept: ["image/jpeg","image/png"],
dataType: 'string',//字符串图片组
hide: true,
row: true,
span: 24,
multiple: true,//文件多选
listType: 'picture-card',
propsHttp: {
home: 'http://demo.loc',
url: 'file'// 上传成功的文件键名
},
limit: 9,
fileSize: 500*1024,//上传文件大小
tip: '只能上传jpg/png文件，且不超过500kb',
action: `${this.baseUrl}/upload/upload`
}编辑器 avue-plugin-ueditor 是基于wangeditor二次开发的。
{
label: "内容",
prop: "content",
component: "avueUeditor",
options:{
//普通图片上传
action: `${this.baseUrl}/upload/upload`,
props: {
home: 'http://demo.loc',
url: 'file'// 上传成功的文件键名
}
}
}
修改（新服务器安装时，覆盖该文件）：
node_modules\avue-plugin-ueditor\packages\ueditor\src\main.vue
190行增加：
// 增加home参数 - flymoo 2020.6.11
if(this.props.home) result = this.props.home + result;
node_modules\avue-plugin-ueditor\packages\ueditor\src\main.vue
127行增加自定义表情
this.editor.customConfig.emotions
把 avue-plugin-ueditor 依赖包改成本地管理的方式：
方法1、安装本地依赖包的方式：
npm install --save file:file:src/local_node_modules/avue-plugin-ueditor
方法2、直接修改 package.json ，增加依赖：
"avue-plugin-ueditor": "file:src/local_node_modules/avue-plugin-ueditor",
END.