フロントエンドワーカーとして、いくつかのUIコンポーネントを自分で作成してみることができます。

コンポーネントを書く必要はありませんが、書く過程で能力を向上させ、思考をより包括的にすることができます。

コンポーネントが書き込まれた後、後で呼び出されたときにフォルダをコピーすることは絶対に不可能です。これは低すぎます。フロントエンドの担当者は、コンポーネントをnpmに公開してから、npminstallを使用して独自のコンポーネントをダウンロードできます。

npmリリースプロセス

1つは、npmアカウントを作成する

npm公式ウェブサイト：npm公式ウェブサイト

npmへのアカウントの登録は非常に簡単です。必要なのはメールアドレスだけで、携帯電話も必要ありません。
ここに画像の説明を挿入

次に、独自のコンポーネントを作成します

私が作成したvueコンポーネントである
npminitは、npmが初期化されると新しいプロジェクトを作成します

パッケージ名は、将来のコンポーネントの名前を表します
versionは、現在のバージョン番号を表します
Desrciptionはコンポーネントを説明できます
entrt pointはファイルを入力することを表し、デフォルトのindex.jsで問題ありません
キーワードはキーワードの略です
作者作者
ライセンスは合意を表し、npmはISCを使用し、デフォルトは問題ありません

ここに画像の説明を挿入
プロジェクトのpackage.jsonが出てきます

3つ、コンポーネント構成index.js

コンポーネントの一部を記述した後、これらのコンポーネントを
ここに画像の説明を挿入
index.jsindex.js構成コードに構成できます。

/*
* @author kongchengji
* Date: 2021/2/1
*/
import Vue from 'vue'

import wzc_select from "./select/wzc-select";
import wzc_option from "./select/wzc-option";
import wzc_button from "./button/wzc-button";
import wzc_switch from "./Switch/wzc-switch";
import wzc_slider from "./Slider/wzc-slider";
import wzc_collapse from "./Collapse/wzc-collapse";
import wzc_collapse_item from "./Collapse/wzc-collapse-item";
import wzc_color_picker from "./ColorPicker/wzc-color-picker";
import wzc_timeline from "./TimeLine/wzc-timeline";
import wzc_timeline_option from "./TimeLine/wzc-timeline-option";
import wzc_dividingline from "./DividingLine/wzc-dividingline";
import wzc_picview from "./PicView/wzc-picview"

const components = [
    wzc_select,
    wzc_option,
    wzc_button,
    wzc_switch,
    wzc_collapse,
    wzc_collapse_item,
    wzc_color_picker,
    wzc_slider,
    wzc_timeline,
    wzc_timeline_option,
    wzc_dividingline,
    wzc_picview,
]

const install = function(Vue) {
    
    
    if(install.installed) return
    components.map(component => Vue.component(component.name, component))
    // Vue.prototype.$message = Message
  }
  
  
export default {
    
    
    install,
    wzc_select,
    wzc_option,
    wzc_button,
    wzc_switch,
    wzc_collapse,
    wzc_collapse_item,
    wzc_color_picker,
    wzc_slider,
    wzc_timeline,
    wzc_timeline_option,
    wzc_dividingline,
    wzc_picview,
}

4、npmへのターミナルログインとnpmの公開

ターミナルnpm loginに入力してログインします。
アカウント、パスワード、メールアドレスを入力します。入力しても
パスワードは表示されません
ここに画像の説明を挿入
。npmnpm publishを公開する場合は、公開に使用してください。

公開が成功すると、メールボックスは正常に公開されます。デフォルトではメールです。
現時点では、npmウェアハウスにあります。リリースされたコンポーネントは次の場所にあります。
ここに画像の説明を挿入

5、npmの変更

コンポーネントに欠陥があり、それを変更したいnpm publish場合は、変更後に送信するときにバージョン番号を変更することを忘れないでください。変更しないと、リリースが失敗します。
ここに画像の説明を挿入
リリースの失敗

npmは独自のコンポーネントを公開しています