Webpackカスタムvueコンポーネントライブラリの構築

Webpackでvueコンポーネントライブラリを構築する手順について説明します.
前提:nodeのインストール
一、ディレクトリw-componentsを作成し、自分で勝手に2を命名し、ディレクトリに入ってnpm init初期化プロジェクト3を実行し、webpackとwebpack-cliをインストールすることができる.

npm install webpack webpack-cli --save-dev

四、vueなどのその他の依存パッケージのインストールについては、package.json、webpackプロファイルwebpack.config.jsの作成、構成内容6の追加、srcディレクトリの作成、componentsサブディレクトリ7の作成、componentsにvue単一ファイルコンポーネント8を格納、srcディレクトリの下にmainを作成する.js

import SdcCanvas from 'comp/SdcCanvas'
import SdcCanvasBlock from 'comp/SdcCanvasBlock'

const components = [SdcCanvas, SdcCanvasBlock]

const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export {
  SdcCanvas,
  SdcCanvasBlock
}

九、構築

npm run build //  dist/w-ui.js   
npm run demo //  dist/demo    

十、コンポーネントライブラリをnpmにパブリッシュする

npm login //  ，    npm  ，         ，      npm       
npm publish //     ，     
npm unpublish [/][@] //  24       
npm deprecate [@]  //          

十一、ソースgithub