フロントエンドのパブリック Vue コンポーネント ライブラリを構築する方法

はじめに

開発プロセス中、私たちのページは非常に複雑で、各チームメンバーが独自に機能を開発し、最終的には戦闘に参加する必要がありました。これには、誰もが共通のコンポーネントを使用して開発をスピードアップし、開発効率を向上できるように、パブリック コンポーネント ライブラリが必要です。

Vue.js は現在最も注目されているフロントエンド フレームワークの 1 つであり、国内外の多くの企業で採用されています。したがって、実際には、自社に適した Vue.js コンポーネント ライブラリを構築する方法は、フレームワークを必要とする多くのチームにとって必須のコースになります。

この記事では、参考として、会社に適した Vue.js コンポーネント ライブラリを構築する方法を段階的に説明します。

1. コンポーネント ライブラリの構築

Vue コンポーネントは抽象的な概念であり、インターフェイスの複雑な DOM 構造とスタイルを独立したコンポーネントにカプセル化し、複数のインターフェイスから参照できるようにします。 、それぞれのビジネス ロジックを処理します。

1. コンポーネント ライブラリの技術的ソリューションを決定する

コンポーネント ライブラリを構築する前に、コンポーネント ライブラリの技術的ソリューションを決定する必要があります。一般的なものは 2 つあります。サードパーティのライブラリや自社開発のコンポーネントを通じてコン​​ポーネントを導入します。

サードパーティ ライブラリによるコンポーネントの導入は、サードパーティ コンポーネント ライブラリを使用することで開発効率や保守コストを向上させることができますが、サードパーティ コンポーネント ライブラリの仕様に準拠する必要があり、柔軟性が比較的低いというデメリットがあります。 。

自社開発コンポーネントは、コンポーネント ライブラリを自由にカスタマイズし、企業の仕様に準拠できますが、開発、メンテナンス、更新に多大な労力が必要です。

実際の状況に基づいて、管理とメンテナンスを容易にするためにコンポーネントを独立して開発することを選択します。

2. プロジェクトの初期化

Vue CLI 3 を使用して、プロジェクトのスケルトンをすばやく構築します。

    $ vue create my-component-lib
    $ cd my-component-lib

ここでは、babel、router、vuex を使用した手動構成を選択します。

次に、less と sass のサポートをプロジェクトに追加します。

    $ npm install less less-loader node-sass sass-loader -D

インストール後、src フォルダーの下に新しいアセット フォルダーを作成し、コンポーネント ライブラリ全体のスタイルを制御するためのスタイル ファイルindex.less を追加できます。

3. コンポーネントの開発

src フォルダーの下に、開発したコンポーネントを配置するためのコンポーネント フォルダーを作成します。同時に、メンテナンスと表示を容易にするために、コンポーネント フォルダーの下に別のindex.js ファイルを作成できます (コンポーネントごとに管理用のフォルダーが必要です)。

ここでは、コンポーネント ライブラリの開発を示すために、HelloWord.vue のサンプル コンポーネントを作成します。

    <template>
      <div class="hello-world">
        <h1>Hello World</h1>
        <p>{{ message }}</p>
      </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      props: {
        message: {
          type: String,
          default: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    <style scoped>
    .hello-world {
      font-size: 14px;
      line-height: 24px;
      color: #333;
    }
    </style>

注: 現在のコンポーネントのスタイルが他のコンポーネントに影響を与えないように、コンポーネントの CSS スタイルにはスコープ属性を追加する必要があります。

4. コンポーネントの登録

コンポーネントを登録するには、グローバル登録とローカル登録という 2 つの主な方法があります。

グローバル登録ではどこからでもコンポーネントを参照できますが、ローカル登録は現在のコンポーネント内でのみ使用できます。もちろん、管理の都合上、コンポーネントは専用のファイルに登録します。

プロジェクト エントリ ファイル src/main.js にコンポーネントを登録します:

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import HelloWorld from '@/components/HelloWorld'

    Vue.config.productionTip = false

    Vue.component('HelloWorld', HelloWorld)

    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

この時点で、プロジェクトで HelloWorld コンポーネントを使用できるようになります。

    <template>
      <div class="container">
        <HelloWorld message="Welcome to my component library" />
      </div>
    </template>

2. コンポーネント ライブラリのリリース

コンポーネント ライブラリの開発後、開発者が npm 経由でコンポーネント ライブラリをダウンロードして使用できるように、それを npm に公開する必要があります。

1. パッケージ化コマンドの構成

package.json ファイルに次のコマンドを追加します。

    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lib": "vue-cli-service build --target lib --name my-component-lib ./src/components/index.js"
    }

上記のコマンドでは、 lib コマンドはコンポーネント ライブラリをパッケージ化するために使用され、パッケージ化後に生成されたファイルは dist フォルダーに配置されます。

2. カスタム パッケージング構成

パッケージ化されたコンポーネントをより適切に使用できるようにするには、プロジェクトのルート ディレクトリに新しい vue.config.js ファイルを作成する必要があります。次のコードを追加します:

    module.exports = {
      // 组件库名称
      outputDir: 'my-component-lib',
    
      // 配置打包的全局入口组件
      configureWebpack: {
        output: {
          libraryExport: 'default'
        },
        externals: {
          vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
          }
        }
      },
    
      // 配置如何处理一些特殊的 CSS，如全局 CSS 的提取
      css: {
        extract: {
          filename: 'css/[name].css'
        }
      }
    }

その中で、outputDir パラメータはパッケージ化出力ディレクトリを表し、configureWebpack パラメータは Webpack 構成を表します。パッケージ化されたエントリと libraryExport をデフォルトに設定する必要があります。コンポーネント ライブラリの場合、「my-component -lib」から X をインポートするだけで十分であり、X からデフォルトをインポートする必要はありません。externals パラメータは Webpack 設定を表し、インポートされた Vue.js は無視されます。

3. コンポーネント ライブラリのリリース

npm run lib コマンドを実行して、コンポーネント ライブラリをパッケージ化します:

    $ npm run lib

パッケージ化が完了したら、npm に公開します。 :

    $ npm login
    $ npm publish

他のプロジェクトでは、npm install my-component-lib:

    import HelloWorld from 'my-component-lib/components/HelloWorld'

    Vue.component('HelloWorld', HelloWorld)

3. コンポーネント ライブラリのバージョン管理

コンポーネント ライブラリを開発する場合、バージョン管理は非常に重要です。コンポーネント ライブラリのバージョンを管理していないと、バグが発見されたときに対処する方法がありません。さらに、開発プロセスではバージョンの反復の問題が避けられず、バージョンが管理されていない場合、非常に混乱し、チームの開発効率に影響を及ぼします。

バージョン管理方法は Git ブランチ管理に基づいています。各バージョンは Git 上のブランチに対応します。開発プロセス中、各ブランチはそれに応じて開発およびテストされ、最終的にメイン ブランチにマージされてリリースされます。バージョン。 。

4. 結論

この記事の導入部を通じて、誰もが自分の会社に適した Vue.js コンポーネント ライブラリを構築し、それを npm で正常に公開して使用する方法をすでに知っていると思います。 。コンポーネントライブラリの開発はフロントエンド開発チームが解決すべき課題の一つであるため、コンポーネントライブラリの開発と管理に関する知識を柔軟に習得し、会社と自身の発展に貢献する必要があります。

以上がフロントエンドのパブリック Vue コンポーネント ライブラリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。