初写一个npm从0到1到过程

前言

了解其名字 npm 是 Node Package Manager 的简称

在学习一项技能的时候，我们要知其然然后所以然，网上对 npm已经有了有很多的理解，我这里就不在一一赘述了，附上一份参考的链接，感兴趣的同学可以前去观摩一波。

准备工作

1. 请在终端输入 npm -v 检测本机是否安装 npm ，如果未安装的话，请跳转node官网下载

由于新版的nodejs已经集成了npm,所以一下两用

2. 打开 npm官网 注册一个npm账号，以备后续发布 npm包 时的需要

3. 在本地创建一个空的文件夹 => mkdir <fileName>

开始编写npm

本次的 npm 是基于 Vue.js 编写

1. 我们用编辑器打开之前准备好的空文件夹，然后在终端输入 npm init ，根据安装提示，填写对应的信息。这里在填写npm包的名字的时候，可以先在 npm官网 官网搜索一波 是否重名 ，如果重名的话，请记得更换npm包的名字，以免后续发布失败

这步操作完成后，就会生成一个 packge.json 的文件，里面会生成对应的配置信息

2. 打开终端，继续输入 npm install ，完成之后会生成 packge-lock.json 的配置文件

3. 在文件夹内分别创建两个文件 src 和 dist ，并且配置 packge-lock.json

4. 编写对应的Vue插件，老规矩，先写一个 hello world 吧

5. 编写完成之后，在终端输入 npm run build 对本次编写的插件进行打包

6. 打包完成之后，在终端输入 npm login --registry http://registry.npmjs.org 登陆 npm 账号

7. 登陆成功之后，在终端输入 npm publish --registry http://registry.npmjs.org 进行发布发布

第6步和第7步都在命令后面添加了一个 npm镜像 是为了防止有的时候我们在淘宝镜像下无法正常登陆npm账号和发布npm包；发布成功后，我们可以在npm官网搜索到我们的npm包，也可以在项目中直接导入我们的npm包，来尝试一下吧

引用已发布的npm

1. 创建一个Vue项目

2. 在终端输入 npm install <npm包名>

3. 在 main.js 进行 inport 导入，并且写上Vue.component('自定义标签名',引用名)，这样就能在各个页面都能使用了

从编写npm包到导入npm包的使用，完成了一个闭环，能写会用，感觉还是可以的

写在后面

可能断断续续写的不是很好，但是还是在用心的去记录自己的一些成长历程，你我皆在路上，风雨终有归途，愿时光不负有心人。