Bagaimana untuk membina perpustakaan komponen vue awam bahagian hadapan

Kata Pendahuluan

Semasa proses pembangunan, halaman kami adalah sangat kompleks, memerlukan setiap ahli pasukan untuk membangunkan fungsi secara bebas, dan akhirnya melawan satu sama lain. Ini memerlukan perpustakaan komponen awam supaya semua orang boleh menggunakan komponen biasa untuk mempercepatkan pembangunan dan meningkatkan kecekapan pembangunan.

Vue.js ialah salah satu rangka kerja bahagian hadapan yang paling hangat pada masa ini dan diterima pakai oleh banyak syarikat di dalam dan luar negara. Oleh itu, dalam amalan, cara membina perpustakaan komponen Vue.js yang sesuai untuk syarikat anda sendiri akan menjadi kursus yang diperlukan untuk banyak pasukan yang memerlukan rangka kerja.

Artikel ini akan membawa anda langkah demi langkah untuk membina perpustakaan komponen Vue.js yang sesuai untuk syarikat anda untuk rujukan anda.

1. Pembinaan pustaka komponen

Komponen Vue ialah konsep abstrak, iaitu merangkum beberapa struktur DOM yang kompleks dan gaya antara muka ke dalam komponen bebas, supaya berbilang antara muka boleh merujuknya mengendalikan logik perniagaan masing-masing.

1. Tentukan penyelesaian teknikal untuk perpustakaan komponen

Sebelum membina perpustakaan komponen, kita perlu menentukan penyelesaian teknikal untuk perpustakaan komponen Terdapat dua penyelesaian biasa: memperkenalkan komponen melalui perpustakaan pihak ketiga dan komponen yang dibangunkan sendiri.

Memperkenalkan komponen melalui perpustakaan pihak ketiga boleh menggunakan perpustakaan komponen pihak ketiga untuk meningkatkan kecekapan pembangunan dan kos penyelenggaraan. Kelemahannya ialah ia perlu mematuhi spesifikasi perpustakaan komponen pihak ketiga dan mempunyai fleksibiliti yang agak lemah. .

Komponen yang dibangunkan secara bebas, anda boleh menyesuaikan perpustakaan komponen secara bebas dan mematuhi spesifikasi syarikat, tetapi ia memerlukan lebih banyak usaha dalam pembangunan, penyelenggaraan dan kemas kini.

Berdasarkan keadaan sebenar, kami memilih untuk membangunkan komponen kami sendiri untuk memudahkan pengurusan dan penyelenggaraan.

2. Mulakan projek

Gunakan Vue CLI 3 untuk membina rangka projek dengan cepat.

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

Di sini kami memilih konfigurasi manual, menggunakan babel, penghala dan vuex.

Seterusnya, kami menambah kurang sokongan dan sass kepada projek.

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

Selepas pemasangan, kami boleh mencipta folder aset baharu di bawah folder src dan menambah index.less fail gaya untuk kawalan gaya keseluruhan pustaka komponen.

3. Membangun komponen

Di bawah folder src, cipta folder komponen untuk meletakkan komponen yang dibangunkan. Pada masa yang sama, untuk memudahkan penyelenggaraan dan tontonan, kami boleh mencipta fail index.js lain di bawah folder komponen Setiap komponen memerlukan folder yang berasingan untuk pengurusan.

Di sini kami menulis komponen sampel HelloWord.vue untuk menunjukkan pembangunan perpustakaan komponen.

    <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>

Nota: Gaya CSS komponen perlu menambah atribut berskop supaya gaya komponen semasa tidak menjejaskan komponen lain.

4. Mendaftar komponen

Terdapat dua cara utama untuk mendaftar komponen: pendaftaran global dan pendaftaran tempatan.

Pendaftaran global membolehkan kami merujuk komponen di mana-mana sahaja, manakala pendaftaran tempatan hanya boleh digunakan dalam komponen semasa. Sudah tentu, untuk kemudahan pengurusan, kami akan mendaftarkan komponen dalam fail khas.

Daftar komponen dalam fail kemasukan projek 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')

Pada ketika ini, kita boleh menggunakan komponen HelloWorld dalam projek.

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

2. Keluaran perpustakaan komponen

Selepas perpustakaan komponen dibangunkan, kami perlu menerbitkannya ke npm supaya pembangun boleh memuat turun dan menggunakan perpustakaan komponen kami melalui npm.

1. Konfigurasikan arahan pembungkusan

Dalam fail package.json, tambahkan arahan berikut:

    "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"
    }

Dalam arahan di atas, kami telah menyesuaikan The Perintah lib digunakan untuk membungkus perpustakaan komponen, dan fail yang dijana selepas pembungkusan akan diletakkan dalam folder dist.

2. Konfigurasi pembungkusan tersuai

Untuk menjadikan komponen yang dibungkus lebih sesuai digunakan, kita perlu mencipta fail vue.config.js baharu dalam direktori akar projek dan tambah Kod berikut:

    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'
        }
      }
    }

Antaranya, parameter outputDir mewakili direktori output pembungkusan parameter configureWebpack mewakili konfigurasi webpack Anda perlu menetapkan entri berpakej dan pustakaExport kepada lalai, supaya apabila memperkenalkan pustaka komponen, anda hanya perlu mengimport X daripada 'my-component -lib' sudah mencukupi, dan tidak perlu mengimport lalai daripada X parameter luaran mewakili konfigurasi webpack, dan Vue.js yang diimport diabaikan.

3. Keluaran perpustakaan komponen

Laksanakan arahan npm run lib untuk membungkus perpustakaan komponen:

    $ npm run lib

Selepas pembungkusan selesai, terbitkannya ke npm :

    $ npm login
    $ npm publish

Dalam projek lain, pasang perpustakaan komponen melalui npm install my-component-lib:

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

    Vue.component('HelloWorld', HelloWorld)

3 Pengurusan versi perpustakaan komponen

Apabila membangunkan perpustakaan komponen, pengurusan versi Sangat penting. Jika kami tidak mengurus versi pustaka komponen, kami tidak akan dapat melakukan apa-apa sebaik sahaja pepijat ditemui. Selain itu, sudah pasti akan ada isu lelaran versi semasa proses pembangunan Jika versi tidak diurus, ia akan menjadi sangat mengelirukan dan menjejaskan kecekapan pembangunan pasukan.

Kaedah pengurusan versi adalah berdasarkan pengurusan cawangan Git Setiap versi sepadan dengan cawangan pada Git Semasa proses pembangunan, setiap cawangan perlu dibangunkan dan diuji dengan sewajarnya, dan akhirnya digabungkan ke dalam cawangan utama untuk dikeluarkan. versi.

4. Kesimpulan

Melalui pengenalan artikel ini, saya percaya semua orang sudah tahu cara membina perpustakaan komponen Vue.js yang sesuai untuk syarikat mereka sendiri, dan berjaya menerbitkannya di npm. Pembangunan perpustakaan komponen adalah salah satu masalah yang perlu diselesaikan oleh pasukan pembangunan bahagian hadapan Oleh itu, kita perlu secara fleksibel menguasai pengetahuan berkaitan pembangunan dan pengurusan perpustakaan komponen untuk menyumbang kepada pembangunan syarikat dan dirinya sendiri.

Atas ialah kandungan terperinci Bagaimana untuk membina perpustakaan komponen vue awam bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!