Nuxt baru Ciri -ciri masa lalu v2.10

NUXT menawarkan pengalaman pemaju yang luar biasa, dengan banyak persembahan dan persediaan aplikasi amalan terbaik yang dibakar. Dalam siaran baru -baru ini, mereka telah berusaha untuk mengambil pengalaman pemaju ini ke peringkat seterusnya, dengan beberapa ciri baru yang mempercepatkan dan memudahkan proses pemaju. Mari kita meneroka beberapa hari ini.

Saya menyediakan repo dan tapak untuk anda meneroka beberapa ciri ini! Anda boleh menyemaknya di sini:

Demo Live Site

Kandungan nuxt

Anda tidak lagi perlu memasangkan NUXT dengan CMS tanpa kepala luaran dan melakukan semua persediaan, terutamanya jika anda tidak mencari sesuatu pada skala yang besar, tetapi sesuatu yang lebih kecil seperti blog. Kandungan NUXT menawarkan CMS tanpa kepala berasaskan GIT di mana anda boleh menulis konfigurasi dalam Markdown, CSV, YAML, atau XML, berdasarkan keutamaan anda. Terdapat beberapa tetapan konfigurasi kotak yang tersedia untuk anda, dan menulis konfigurasi tersuai semudah membuat harta.

Apa ini bermakna untuk pembangunan: anda boleh menulis fail markdown statik dalam direktori, dan itu boleh menjadi blog anda! Kami menggunakan API halaman dinamik yang sama yang biasanya anda gunakan di NUXT untuk menghasilkan kandungan ini.

Ia juga menawarkan carian teks penuh dari kotak, yang merupakan ciri yang indah untuk menambah begitu cepat ke blog tanpa perlu mengintegrasikan perkhidmatan pihak ketiga.

Tutorial ini oleh Debbie O'Brien adalah panduan yang luar biasa, ia membimbing anda melalui setiap bahagian yang ditetapkan, sangat disyorkan.

Komponen NUXT

Satu perkara yang saya perhatikan yang saya lakukan lagi dan lagi dan lagi menaip kod import dalam semua komponen saya. Saya mempunyai beberapa coretan untuk membuat ini sedikit lebih cepat, tetapi menambahkannya masing -masing dalam setiap fail masih mengganggu aliran kerja saya sedikit.

Modul komponen NUXT mengimbas, import, dan komponen mendaftar, supaya kita tidak lagi perlu melakukan ini. Komponen mestilah dalam direktori komponen, tetapi kita boleh menggunakannya dalam susun atur, halaman, dan komponen sendiri.

Penambahan modul ini adalah perubahan kecil kepada nuxt.config.js kami:

 Eksport Lalai {
  Komponen: Benar
}

Serius, itu sahaja!

Jika anda ingin menyelam yang mendalam, panduan yang sangat komprehensif ini oleh Kruite Patel telah dilindungi.

Jika anda menggunakan komponen berulang kali, NUXT akan melakukan beberapa pengoptimuman yang bagus seperti secara automatik membuat bahagian bersama untuk komponen. Berhati -hati apabila menggunakan ini pada projek -projek besar, walaupun, kerana ia mungkin memberi kesan kepada masa membina.

Imej NUXT

NUXT Image adalah modul yang lebih baru yang menawarkan saiz semula lancar dan cepat dan berubah untuk imej responsif yang dioptimumkan. Anda boleh menggunakan pengoptimum terbina dalam mereka, atau bekerja dengan 10 penyedia popular yang sedia ada seperti Cloudinary atau cepat.

Output kod dari menggunakan API mereka adalah tag standard dan , jadi tidak ada obfuscation apabila mengintegrasikannya ke dalam aliran kerja anda.

Selepas menambah modul, anda akan dapat menambah konfigurasi kepada imej melalui harta imej dalam nuxt.config.js, dan menetapkan titik putus, penyedia, dan konfigurasi lain:

 Eksport Lalai {
  Imej: {
    // Saiz skrin yang telah ditentukan oleh `@nuxt/image`:
    skrin: {
      XS: 320,
      SM: 640,
      MD: 768,
      LG: 1024,
      XL: 1280,
      XXL: 1536,
      '2xl': 1536
    },
    // menjana imej ke `/_nuxt/image/file.png`
     staticFileName: '[publicPath]/images/[name]-[hash] [ext]',
     Domain: [
        'image.unsplash.com'
    ],
    alias: {
      Unsplash: 'https://images.unsplash.com'
    }
  }
}

Ini hanya satu persampelan beberapa pilihan yang tersedia untuk anda, disediakan sebagai contoh. Dokumentasi penuh ada di sini.

Dan kemudian penggunaannya sama dengan mana -mana komponen Vue:

 <nuxt-img src="/nuxt-icon.png"></nuxt-img>

atau

 <nuxt-picture src="/nuxt-icon.png"></nuxt-picture>

Maklumat lanjut dan semua pilihan didokumenkan di sini. Petua topi ke Ben Hong kerana memberitahu saya ini ada. Dia mempunyai beberapa sumber NUXT di luar sana yang patut diterokai juga!

Repo sampel

Saya telah membuat repo sampel untuk anda meneroka yang menggunakan semua fungsi ini. Ia adalah blog resipi kecil dengan kandungan nuxt untuk penyertaan resipi, komponen NUXT supaya saya tidak perlu menentukan import, dan imej NUXT untuk transformasi imej.

Demo Live Site

Anda boleh melawatnya di sini untuk melihatnya dalam tindakan, garpu, bermain -main dengannya, dan menjadikannya sendiri.

Anda dapat melihat di dalamnya bagaimana saya menggunakan $ IMG API dalam imej NUXT untuk imej latar belakang di sini juga, yang belum didokumenkan sepenuhnya.

NUXT menawarkan pengalaman pemaju yang luar biasa. Nuxt juga keluar dengan versi baru tidak lama lagi dengan lebih banyak kemas kini, sentiasa dilaksanakan dengan pakar. Itulah sebabnya menggunakan NUXT terus -menerus seperti kegembiraan, dan terbukti menjadi rangka kerja yang hebat untuk pasukan dan pemaju tunggal.

Atas ialah kandungan terperinci Nuxt baru Ciri -ciri masa lalu v2.10. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!