序文
コンポーネント パッケージが npm プラットフォームにリリースされると、コマンドによってインストールされたプラグインを他の人が使用できるようになります。優れたパブリック コンポーネントは、柔軟性と多用途性の特性を備えている必要があります。
リリースが成功したら、次の図に示すように、 cpm 公式 Web サイトで検索してコンポーネントの名前を見つけることができます。
コンポーネントのダウンロード アドレス: cxy-loading-animation - npm
最初の一歩
単純な vue プロジェクトを作成します。vue create xxx を使用して vue プロジェクトを作成します。
第二段階
次のように、src フォルダーの下にパッケージ フォルダーを作成し、コンポーネントをカプセル化してから、パッケージ フォルダーの下にindex.js を作成し、パッケージ化されたコンポーネントをindex.js ファイルにインポートします。
第三段階
次のコードを package.json ファイルに追加します。
コード
"package": "vue-cli-service build --target lib ./src/package/index.js/ --name cxy-loading-animation --dest cxy-loading-animation"命令名: コマンド -- target lib --name パッケージ化されたファイル名 パッケージ化されたパス --dest パッケージ化されたフォルダー名
4番目のステップ
npm run packageコマンドを実行してパッケージ化すると、実行に成功すると以下のようなファイルがディレクトリに生成されます。
生成したフォルダーに入り、コマンド cd cxy-loading-animation を入力し、初期化コマンド npm init -y を実行すると、package.json が生成され、package.json にいくつかの設定を記述することができます。
最適化して、必要なファイルのみを保持し、コンポーネントの使用方法を記述する新しい readme.md を作成します。
CSS ファイルを保存する新しいスタイル フォルダーを作成します。cxy-loading-animation.umd.min.js の名前が長すぎると思われる場合は、index.js に変更し、パッケージ内の main: エントリー ファイルを変更します。 json を Index.js に変換します。最適化後は、次の図のようになります。
5番目のステップ
自分で npm にアカウントを登録しない場合は、npm adduser コマンドを使用して npm アカウントを追加します
ステップ6
npm public を使用してプラグインを npm プラットフォームにアップロードします
アップロードが成功すると、次のようにプラットフォーム上で確認できます。
ここにパッケージ化されたコンポーネントは、npm プラットフォームにアップロードされています。
注: アップロードに失敗した場合は、名前が重複している可能性があります。名前を変更するか、ミラーの問題である可能性があります。以前に淘宝網ミラーを変更したことがある場合は、公式ミラーに切り替えてください。切り替えコマンドは次のとおりです:
npm config set registry=https://registry.npmjs.orgプロジェクト内で独自のプラグインを使用する
インストールコマンドを実行する
npm install cxy-loading-animation次に、main.js がグローバル登録を参照します。
import cxyLoadingAnimation from 'cxy-loading-animation'
import 'cxy-loading-animation/cxy-loading-animation.css'
Vue.use(cxyLoadingAnimation)次に、使用する必要があるページを使用します
<cxyLoadingAnimation :animation="true" />成分効果
新しいバージョンのアップデート
コンポーネントを更新する場合は、バージョン番号を変更する必要があります。バージョン番号は最後のものよりも大きくなければなりません。そうしないとアップロードできません。
