基本的な開発は、VUEコンポーネントライブラリステップ

市場の多種多様があり、そのような要素とのiView、その強い疑いとしてUIコンポーネントライブラリは、。しかし、彼らはもはや私たちの時間のニーズを満たすことができないときに我々は、より多くの複雑なニーズに直面している状況は、それが必要である今回は、独自のチームのコンポーネントライブラリのセットを開発します。

なぜコンポーネントライブラリを開発しますか?

あなたの会社は、ページのスタイルのための必要条件ではない場合、あなたは単にのような、ラインで使用するコンポーネントライブラリを取るなどの要素、iViewの、のホイールを作成繰り返す必要はありませんが、
コンポーネントと現在の場合のみ、個人、または唯一限りのでの開発プロジェクトとして、個々のコンポーネントに必要とされる上、あなたがより迅速な開発アプローチのチームをしたい場合は、標準的なアプリケーションの種類を設定することを望んで、そして、その上に.vue単一ファイルコンポーネントスタイルのコンポーネントを使用すると、コンポーネントのライブラリを開発する必要があり、その後、高い要件があります。

開発コンポーネントライブラリのステップ:

プロジェクトを作成します。

 

構造調整計画

 

コンポーネントを書きます

 

使用 VUE-CLI-サービスライブラリパッケージコンパイルモード

 

公開 NPM

開発段階:

ステップ1:プロジェクトを作成します。

 

 

 ステップ2:あなたは、プロジェクトの作成を完了した後、あなたはプロジェクトのルートディレクトリに、このようなインタフェースであります、そしてパッケージと呼ばれる新しいフォルダを追加し、SRCの例にファイルの名前を変更

 

 第三段階:ルートディレクトリvue.config.jsでファイルを作成し、コンパイラにアイテムをドラッグ

 

 

 

 ステップ4:次のようにインターフェースがあり、ファイルパッケージにフォルダを作成し、アセンブリで書かれました

 

 

どこで:

| -日付ピッカー// に書かれた新しいのコンポーネント日付ピッカー例えば

| -テーマ-デフォルト// テーマファイル

テーマファイルが特殊で、別のリリースとして、彼は、トピックパブリッシャを促進するために、パッケージを紹介し、後で紹介します。次に、日付ピッカーを導入しました:

ステップ5:

datePicker.vueファイルコード

 

 

日付ピッカー/ index.js

 

  一括登録コンポーネント

 

パッケージ/ index.js

 

ローカルテストコンポーネント

当社の部品と準備が完了し、ローカルでテストするための最初のステップ:

例/ main.js

 

 

どのように我々は、ブラウザのコンポーネントで見ることができます正常に実行され、次のステップは、私たちのコードを取得することであることにパッケージ化された NPMライブラリー、そしてあなたは、ライブラリモードVUE-CLI-サービスの中でVUE-CLI3でパッケージ化する必要があります。

 

 

実行 NPMの実行ビルドLIB

 

 

変更 package.jsonを

 

 

ルートの追加 .npmignoreのファイルを

公開するには、NPMの下でちょうどlibディレクトリ、package.jsonとreadme.mdファイルを、あなたは他のディレクトリを無視する必要があります
.npmignore

(.Npmignoreファイルは、ルートディレクトリに次のコードファイルを追加し、それはコンパイラに表示されない、隠しファイルです:)

例/
パッケージ/
公共/
vue.config.js
postcss.config.js
babel.config.js
* .MAP

ログインNPM(NPMないアカウントならば、あなたはNPMを登録するには、公式サイトに行くことができます)

 

 

 

 最終ログインは公式ウェブサイトはそれの成功を、見にNPM!

 

 

 

おすすめ

転載: www.cnblogs.com/luoluo-snow/p/11636943.html