VUE cli3.0全体的なパッケージは、アセンブリに導入され、JSにファイルNPMをリリースしています

まず作成VUEでプロジェクトを作成します

このように、現在のプロジェクトディレクトリ：

あなたが作成する必要がまず パッケージ ストアコンポーネントに使用されるディレクトリを、

続いて、SRCディレクトリの例一例として、

第二には、設定を変更します

プロジェクトが始まったとき、デフォルトのエントリファイルは、SRC / main.jsです

例にsrcディレクトリしたら、エントリ・ファイルを再設定する必要があります

ルートディレクトリに1を作成し vue.config.js ファイル

// vue.config.js

module.exportsは= {
  //新しいページのexamplesディレクトリを追加します。
  ページ：{
    インデックス：{
      //ページエントリ
      エントリ： '例/ main.js'、
      //テンプレートソース
      テンプレート：「公共/ index.htmlを」
      //出力ファイル名
      ファイル名： 'index.htmlを'
    }
  }
}

あなたがこれを実行した後は、プロジェクトを開始することができます

VUE-CLI 3.xが提供してライブラリーの構築そうそこに、コマンドを再構成しWebPACKのパッケージディレクトリへの必要はありません

第三に、コンポーネントの開発

パッケージは、ストアコンポーネントに使用されるディレクトリを作成している前に、

各成分別開発ディレクトリのディレクトリに格納され、すべてのコンポーネントのindex.js統合、および外部の輸出

各成分は、Srcソースディレクトリ構成要素を含む、別のディレクトリに分類され、外部基準index.jsを促進すべきです

次のようにここでは一例として、TextAreaコンポーネントに、完全なパッケージのディレクトリ構造は次のとおりです。

テキストエリア/ SRC / main.vueは、 アセンブリドキュメントを開発することである、ここでは特定のコードが表示されていません

この名前がタグアセンブリで、コンポーネントが名前を宣言しなければならないことに留意すべきです

テキストエリア/ index.js 導入を行うために必要な場合は、単一の成分を導出するためには、この設定も必要です

//パッケージ/ TEXTAREA / index.js

//インポート・コンポーネント、コンポーネント必見の宣言名
「./main.vue」からインポートテキストエリア

//需要を導入するためのアセンブリのインストール方法を追加します。
Textarea.install =関数（ヴュ）{
    Vue.component（Textarea.name、テキストエリア）
}

輸出デフォルトのテキストエリア

第四に、統合およびエクスポートコンポーネント

編集 パッケージ/ index.js グローバル登録コンポーネントを達成するためのファイル、

//パッケージ/ index.js

//インポートする単一コンポーネント
「./textarea/index」からインポートテキストエリア

//横断を促進するために、配列の構造部品を保存
CONST成分= [
    TEXTAREA
]

//メソッドをインストール定義
CONSTインストール=関数（ヴュ）{
    （install.installed）リターン場合
    install.installed =真
    //反復処理し、登録された世界的なコンポーネント
    components.map（成分=> {
        Vue.component（component.name、コンポーネント）
    }）
}

もし（typeof演算窓！== '未定義の' && window.Vue）{
    インストール（window.Vue）
}

輸出のデフォルト{
    //輸出オブジェクトは、インストールの方法を持っている必要があります
    インストール、
    //コンポーネントのリスト
    ...コンポーネント
}

ここではコンポーネント上にはすでに開発されています

可能性のある 例/ main.js アセンブリに導入

「../packages/index」からインポートTagTextarea
Vue.use（TagTextarea）

次に、あなたは直接だけで開発されたTextAreaコンポーネントを使用することができます

Labelコンポーネントは、コンポーネント名内で定義されます

あなたが実行をNPMすることができます。この時間は、コンポーネントがバグを持っているかどうかをテストするには、プロジェクトを開始するのに役立ちます

//新しいエントリを開始する前に確認する必要がありますがvue.config.jsに例/ main.jsに追加されました

第五に、パッケージング成分

VUE-CLI 3.xが提供ライブラリパッケージのコマンドを

主な必要性四つのパラメータ：

1. ターゲット：デフォルトのアプリケーションは、変更構築するために libが ライブラリを構築するためにモデルを有効にします

2. 名前：出力ファイル名

3. DEST：出力ディレクトリ、デフォルトは我々が変更さdistの、ある libが

4. エントリ：入口ファイルパス、デフォルトのsrc / App.vueに パッケージ/ index.js

基于此，在 package.json 里的 scripts 添加一个 lib 命令

// pageage.json

{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"
  }
}

然后执行 npm run lib 命令，编译组件

六、准备发布

首先需要在 package.json 添加组件信息

name: 包名，该名不能和已有的名称冲突；

version: 版本号，不能和历史版本号相同；

description: 简介；

main: 入口文件，应指向编译后的包文件；

keyword：关键字，以空格分割；

author：作者；

private：是否私有，需要修改为 false 才能发布到 npm；

license：开源协议。

然后创建 .npmignore 文件，设置忽略文件

该文件的语法和 .gitignore 的语法一样，设置发布到 npm 时忽略哪些目录或文件

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*。地図
* .htmlを

＃ローカルのenvファイル
.env.local
.env。*。ローカル

＃ ログファイル
NPM-debug.logに*
糸DEBUG.LOG *
糸-error.logに*

＃エディタのディレクトリとファイル
。アイディア
.vscode
* .suo
* * .Ntvs
* .njsproj
*の.sln
* .sw *

セブン、NPMを公開します

前のターンNPMはそれが戻って最初の変更で、このような使用淘宝網のミラーとして、アドレスを反映している場合

NPM設定セットレジストリhttp://registry.npmjs.org

あなたがNPMないアカウントを行う場合は、次のことが可能 にadduserをNPM accountコマンドを作成、またはする公式サイトのNPM登録を

前にそこの公式ウェブサイト登録アカウント、またはアカウントの場合、使用 NPMログイン ログにコマンドを

特定のプロセスが参照できる公式ドキュメント（Googleのブラウザ- >中国語の翻訳）

リリース前に、私たちは、コンポーネントがコンパイルされていることを確認する必要があり、かつ正確にpackage.jsonのファイルパスの入り口（メイン）

すべては準備ができて、公開コンポーネントです。

NPM公開

：元のリンクより転載 https://www.cnblogs.com/wisewrong/p/10186611.html

VUE cli3.0全体的なパッケージは、アセンブリに導入され、JSにファイルNPMをリリースしています

おすすめ