salah jajaran gaya pembungkusan vue-cli3

Dengan penggunaan meluas Vue.js dalam pembangunan bahagian hadapan, ramai pembangun telah mula menggunakan Vue CLI 3 untuk mengurus projek Vue mereka dan menggunakan Webpack untuk membungkus projek untuk persekitaran pengeluaran. Walau bagaimanapun, apabila menggunakan pembungkusan Vue CLI 3, kami mungkin menghadapi beberapa masalah salah jajaran gaya Artikel ini akan meneroka cara menyelesaikan masalah ini.

1. Semak versi kebergantungan

Apabila membungkus dengan Vue CLI 3 dan Webpack, pastikan versi semua kebergantungan adalah terkini dan tidak lebih rendah daripada keperluan Vue CLI. Anda boleh menyemak versi Vue CLI menggunakan arahan berikut:

vue --version

dan pastikan versi yang dipasang ialah 3.x.x.

Pada masa yang sama, apabila menggunakan npm atau benang untuk memasang kebergantungan, pastikan anda menggunakan versi terkini pakej, terutamanya pakej yang berkaitan dengan CSS dan gaya, seperti sass-loader, css-loader, dsb.

2. Semak konfigurasi prapemproses CSS

Vue CLI 3 menggunakan scss sebagai prapemproses CSS secara lalai. Jika anda menggunakan prapemproses CSS lain, seperti kurang atau stylus, dan ia tidak disediakan dengan betul dalam konfigurasi projek, ia boleh menyebabkan gaya tidak sejajar. Oleh itu, pastikan prapemproses CSS dikonfigurasikan dengan betul dalam fail vue.config.js, contohnya:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 使用less的变量
        modifyVars: {
          // 或者您想使用jQuery和Bootstrap等的cdn链接
          'jquery':'jquery',
          'moment':'moment',
          'i18n':'vue-i18n',
          'bootstrap':'https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css',
        }
      }
    }
  }
}

Dalam contoh ini, kami telah menambah pilihan yang dipanggil less dan menggunakan modifyVars untuk menukar pembolehubah Kurang Lulus ke dalam fail komponen kami. Dengan mengkonfigurasi prapemproses CSS dengan betul dalam Vue CLI 3, kami boleh menyelesaikan masalah salah jajaran gaya.

3. Semak sama ada hendak menggunakan gaya global

Dalam projek Vue, kami boleh menggunakan gaya global untuk digunakan pada komponen. Jika kami menggunakan pemilih CSS kami sendiri dalam gaya global, ini mungkin menyebabkan masalah salah penjajaran gaya, kerana komponen Vue mungkin disertakan dalam elemen DOM yang mempunyai pemilih CSS yang ditentukan.

Untuk menyelesaikan masalah ini, kita boleh menggunakan skop CSS untuk mengehadkan gaya komponen. Untuk melakukan ini, dalam komponen fail tunggal Vue, kita boleh menggunakan teg