第一步：
首先我們去npm官網註冊一個賬號。
如果你的username一直不能註冊成功，可以在你的username前面加一個~，就可以註冊成功了。
第二步：
1.新建一個項目
2.生成package.json文件
npm init
package name: (testpublish) //包名，可更改，也可以使用默認（直接回車）
version: (1.0.0) 0.0.1 //版本，可更改，也可以使用默認（直接回車）
description: 演示上傳npm包 //項目描述，方便別人瞭解你的模塊作用，搜索的時候也有用
entry point: (index.js) //指定了程序的主入口文件，可更改，也可以使用默認（直接回車）
test command: //測試命令（直接回車）
git repository: //git倉庫（直接回車）
keywords: //一個字符串數組，方便別人搜索到本模塊，可更改，也可以使用默認（直接回車）
author: Heath //作者，可更改，也可以使用默認（直接回車）
license: (ISC) //你可以在https://spdx.org/licenses/這個地址查閱協議列表 ，可更改，也可以使用默認（直接回車）
3.新建index.js文件
因爲上面生成package時，使用的主文件叫index.js，所以我們這邊新建index.js文件。
這邊我們隨便寫一個用戶名脫敏的功能：
module.exports.$hideName = function (name) {
var length = name.length;
var temp = "";
for (var i = 0; i < length - 2; i++) {
temp += "*";
}
if (length <= 2) {
name = name.substring(0, 1) + "*";
} else {
name = name.substring(0, 1) + temp + name.substring(length - 1, length);
}
return name;
};
4.新建README.md文件
README.md文件是一個項目的入門手冊，裏面介紹了整個項目的使用、功能等等
# testpublish
演示上傳npm包
# 快速上手
## 安裝
```shell
npm install testpublish
```
## 全局註冊（在main.js文件裏註冊）
```javascript
import testpublish from 'testpublish';
global.testpublish = testpublish;
```
## 局部註冊（在你所使用的vue裏註冊）
```javascript
import testpublish from 'testpublish';
```
## 例子
姓名脫敏
```javascript
let str = testpublish.$hideName("張三");
```
#目錄
* [1.姓名脫敏](#hideName)
```
<h6 id="hideName">1.姓名脫敏</h6>
```javascript
//返回字符串
let str = testpublish.$hideName("張三");
```
三、上傳npm包
1.npm登錄
npm login
1.1如果登錄時出現下面錯誤時
這個原因是因爲你使用的是淘寶鏡像，所以只要切npm路徑就可以了。
npm config set registry http://registry.npmjs.org/
1.2如果登錄時出現下面錯誤時
這個問題應該是用戶名前面沒有加~的原因
2.上傳
npm publish
如果上傳時出現下面錯誤
這個是因爲包名衝突，也就是npm上已經有了這個包，所以我們只需要在package上改一下名字（比如我就改成了demonstration-publish這個包名）
{
"name": "demonstration-publish",
"version": "0.0.1",
"description": "演示上傳npm包",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Heath",
"license": "ISC"
}
改爲包名後，npm publish一下就可以了。
登錄npm官網，即可看到你剛纔上傳上去的包。
四、更新包
因爲改成更改了包名，所以我們需要更改README.md文件
# demonstration-publish
演示上傳npm包
# 快速上手
## 安裝
```shell
npm install demonstration-publish
```
## 全局註冊（在main.js文件裏註冊）
```javascript
import publish from 'demonstration-publish';
global.publish = demonstration-publish;
```
## 局部註冊（在你所使用的vue裏註冊）
```javascript
import publish from 'demonstration-publish';
```
## 例子
姓名脫敏
```javascript
let str = publish.$hideName("張三");
```
#目錄
* [1.姓名脫敏](#hideName)
```
<h6 id="hideName">1.姓名脫敏</h6>
```javascript
//返回字符串
let str = testpublish.$hideName("張三");
```
修改版本號後，上傳就可以了
{
"name": "demonstration-publish",
"version": "0.0.2",//這邊修改爲0.0.2
"description": "演示上傳npm包",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Heath",
"license": "ISC"
}
//執行
npm publish
五、使用自己上傳上去的npm包
首先我們打開一個vue項目，然後執行下面命令，包名demonstration-publish改爲你們上傳上去的包名。
npm install demonstration-publish
安裝完後，你可以在node_module裏看到這個包。
<!--/* eslint-disable */-->
<template>
<div>
{{name}}
</div>
</template>
<script>
import publish from 'demonstration-publish';//引入包
export default {
name: 'test',
data () {
return {
title: '測試我們上傳的包',
name: '張珊珊'
}
},
methods: {//方法
},
created(){//渲染前執行
document.title = this.title;
this.name = publish.$hideName(this.name);
},
mounted(){//渲染後執行
},
computed: {},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
以上就是所有過程，有什麼不理解的，歡迎大家評論。