很久很久以前，就想發(fā)一個(gè)的，但總是被娛樂的自己做牽制。
想著現(xiàn)在發(fā)~~~
還不錯(cuò)，忙里偷閑，趕緊記憶一波~

回到正題

由于是組件嘛，就不要那么麻煩 vue init webpack xxx還得刪一堆東西，所以使用webpack-simple版本來構(gòu)建一個(gè)項(xiàng)目就好了。

目錄結(jié)構(gòu)

以上呢，寫了三個(gè)組件，aaa文件包含aaa.vue以及index.js

//aaa.vue
<template>
  <div>
    <span>這是aaa組件</span>
    <span>{{con}}</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'aaa',
  props:{
    con:{
      type: String,
      default:'aaa'
    }
  },
};
</script>

//aaa.js
import aaa from './aaa.vue';
aaa.install = Vue => Vue.component(aaa.name, aaa);
export default aaa;

組件bbb和ccc雷同，就不一一介紹了。
當(dāng)然以上組件導(dǎo)出的方法，也可以借鑒這篇文章當(dāng)中的 require.context方式來導(dǎo)出。減少冗長而重復(fù)的代碼。

在src目錄下新建index.js，供webpack中的entry所用。當(dāng)然你也可以直接修改main.js中的代碼，但是不利于調(diào)試，這里就不建議你這么做了。

//index.js
import aaa from "./components/aaa"
import bbb from "./components/bbb"
import ccc from "./components/ccc"

// 1、添加組件
const components = [
  aaa,
  bbb,
  ccc
]

// 2、可以使用Vue.use進(jìn)行全局安裝了。需要第3步
const install = function (Vue, opt = {}){
  components.map( component => {
    Vue.component(component.name, component)
  })
}

// 3、支持使用標(biāo)簽方式引入   這一步判斷window.Vue是否存在，因?yàn)橹苯右胿ue.min.js， 它會(huì)把Vue綁到Window上，我們直接引用打包好的js才能正常跑起來。
if(typeof window !== 'undefined' && window.Vue) {
  install.use(window.Vue)
}


export default {
  install,  //總體
  ...components //按需
}

然后我們需要修改配置文件webpack.config.js

//webpack.config.js
{
  entry: process.env.NODE_ENV === 'development' ? './src/main.js' : './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'yin.js',
    library: 'yin', // 指定的就是你使用require時(shí)的模塊名
    libraryTarget: 'umd', // 指定輸出格式  libraryTarget會(huì)生成不同umd的代碼,可以只是commonjs標(biāo)準(zhǔn)的，也可以是指amd標(biāo)準(zhǔn)的，也可以只是通過script標(biāo)簽引入的
    umdNamedDefine: true // 會(huì)對(duì) UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define
  }
}

最后一步了，修改 package.json中的配置

{
  "private": false,  //默認(rèn)為true，修改為公有
  "main": "dist/yin.js",
  "files": [
    "dist/*",
    "src/*",
    "*.json",
    "*.js"
  ],
}

打包項(xiàng)目
num run build

這么一來，組件方面的需求就已經(jīng)寫完了。現(xiàn)在來說說怎么上傳到npm。

在組件的根目錄下的終端中，

// 登錄npm
npm login

// 發(fā)布組件
npm publish

當(dāng)然這一步是有可能失敗的，除非你定義的組件名，在npm中不重復(fù)。

更新組件

// 修改版本號(hào)
npm version

// 發(fā)布組件
npm publish

刪除npm包

// 強(qiáng)制刪除，這個(gè)是撤銷24小時(shí)發(fā)布的包
npm unpublish --force 

// 刪除已發(fā)布好的包
npx force-unpublish xxxxxx