1、新創(chuàng)建一個空的項目，我創(chuàng)建了一個新的項目（common-package-ui）

2、在src下創(chuàng)建一個package文件夾用于存放自己的自定義組件，我創(chuàng)建了一個測試文件夾（test）,下面創(chuàng)建了一個test.vue文件，文件內(nèi)容如下：

注意： 自己封裝的組件里面一定要有name屬性，為后期install node包后 在頁面使用的組件名

<template>
  <div>
    {{ test }}---{{ name }}
  </div>
</template>
<script>
  export default {
    name: 'kun-kun-test',
    data () {
      return {
        test: '123'
      }
    },
    props: {
      name: {
        type: String,
        default: ''
      }
    }
  }
</script>

3、在package文件夾下創(chuàng)建一個index.js文件，內(nèi)容如下：

// 引入封裝好的組件
import testTemp from '../package/test/test.vue'
// 將來如果有其它組件,都可以寫到這個數(shù)組里
const coms = [testTemp]
// 批量組件注冊
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com)
  })
}
// 這個方法以后再使用的時候可以被use調(diào)用
export default install

4、修改項目根目錄下package.json，增加一句打包代碼：

"package": "vue-cli-service build --target lib ./src/package/index.js --name kun-kun-test --dest kun-kun-test"

打包命令解釋：

--target lib 關(guān)鍵字 指定打包的目錄

--name 打包后的文件名字

--dest 打包后的文件夾的名稱

然后執(zhí)行打包命令：

npm run package

打包執(zhí)行完成后我們項目目錄下就會多出一個kun-kun-test文件夾，存放的是打包后的文件。

5、想要發(fā)布到npm倉庫，我們還得在文件夾下初始化一個package.json文件。

在kun-kun-test目錄下，執(zhí)行命令：

npm init -y

會生成一個package.json的文件

 注意： package.json文件中的name里面不能有大寫！！！

6、發(fā)布到npm倉庫

1）注冊賬號

想要發(fā)布到npm倉庫，就必須要有一個賬號，先去npm官網(wǎng)（https://www.npmjs.com/）注冊一個賬號，注意記住用戶名、密碼和郵箱，發(fā)布的時候會用到。

（2）設(shè)置npm源

有些小伙伴可能本地的npm鏡像源采用的是淘寶鏡像源或者其它的，如果想要發(fā)布npm包，我們得吧我們得npm源切換為官方得源，命令如下：

npm config set registry=https://registry.npmjs.org

（3）添加npm用戶

進入common-package-ui目錄，添加npm用戶，執(zhí)行命令：

npm adduser

這里會讓你填寫用戶名、密碼、郵箱，然后會收到一封郵件，郵件里面有個類似于驗證碼的東西，如果之前設(shè)置過即可跳過此步。

（4）發(fā)布npm

在kun-kun-test目錄下執(zhí)行命令：

npm publish

如果發(fā)布失敗可在百度搜索失敗code碼，一般都是名字重復(fù)或者名字不合格

7、使用

在另外一個項目中進行安裝

npm install 插件名稱（package.json中的名稱）

然后在main.js引用注冊，代碼如下：

import kunTest from 'kun-kun-test'

Vue.use(kunTest)

新建一個空的vue文件使用此插件

<插件名稱></插件名稱>

測試成功，至此結(jié)束！