Menyediakan dan menyesuaikan sistem reka bentuk semut dalam aplikasi nuxt

Walaupun perpustakaan UI kadang-kadang dapat merasa rumit dan sukar untuk disesuaikan, reka bentuk semut menonjol untuk keramahan pengguna, lalai fleksibel, dan reka bentuk yang elegan. Ini telah menjadikannya tambahan yang dialu -alukan kepada toolkit saya.

Nuxt.js dan reka bentuk semut adalah kombinasi yang kuat, memanfaatkan kod pemisahan Nuxt dan penggantian pokok untuk prestasi yang dioptimumkan, terutamanya dengan keupayaan penjanaan tapak statik NUXT. Ini membolehkan aplikasi berprestasi tinggi walaupun menggunakan perpustakaan UI yang kaya seperti reka bentuk semut.

Mengintegrasikannya memerlukan beberapa langkah, kerana dokumentasi komprehensif kini terhad. Mari berjalan melalui proses.

Mengintegrasikan reka bentuk semut ke aplikasi nuxt anda

Pertama, pasangkan pakej yang diperlukan:

 benang tambahkan ant-reka bentuk-tong kurang kurang pemuat
# atau
NPM Pasang Ant-Reka Bentuk-Vue Kurang Loader

Seterusnya, buat plugin ( antd-ui.js ) untuk mendaftarkan reka bentuk semut di seluruh dunia:

 Import Vue dari 'Vue'
Import Antd dari 'Ant-Resign-Vue/Lib'

Vue.use (ANTD)

Nota: Tidak seperti persediaan reka bentuk ANT standard, kami tidak mengimport CSS global. Sebaliknya, kami akan menguruskan gaya melalui pembolehubah yang kurang untuk penyesuaian yang lebih mudah.

Sekarang, konfigurasikan NUXT ( nuxt.config.js ):

1. Daftar plugin:

    Plugin: ["@/plugins/antd-ui"],

2. Dayakan Kurang Penyusunan:

    membina: {
     Loaders: {
       Kurang: {
         LessOptions: {
           JavaScriptEnabled: Benar,
         },
       },
     },
   },

3. Tentukan lembaran gaya global untuk pembolehubah yang kurang:

    CSS: [
     "~/aset/pembolehubah.Less"
   ],

Buat variables.less Fail (dalam /assets ) untuk mengimport mungkir reka bentuk semut dan gunakan Override anda:

 @import '~ Ant-Design-Vue/Dist/Antd.less';

@Primary-color: #1890ff;
@link-color: #1890ff;
@kejayaan-warna: #52C41A;
@Amaran-warna: #FAAD14;
@error-color: #f5222d;
@font-saiz-base: 14px;
@Heading-Color: RGBA (0, 0, 0, 0.85);
@Text-color: RGBA (0, 0, 0, 0.65);
@Text-Color-Secondary: RGBA (0, 0, 0, 0.45);
@Dilumpuhkan warna: RGBA (0, 0, 0, 0.25);
@Border-Radius-Base: 4px;
@Border-Color-Base: #D9D9D9;
@box-shadow-base: 0 2px 8px rgba (0, 0, 0, 0.15);

Itu sahaja! NUXT mengendalikan import komponen secara automatik. Untuk gaya yang sangat spesifik yang tidak dilindungi oleh pembolehubah, laraskan gaya dalam fail layouts/default.vue anda.

Reka bentuk ANT dan NUXT menyediakan rangka kerja yang efisien dan cekap untuk pembangunan aplikasi pesat. Nikmati!

Atas ialah kandungan terperinci Menyediakan dan menyesuaikan sistem reka bentuk semut dalam aplikasi nuxt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!