Nuxt.js: rangka kerja minimalis untuk membuat aplikasi vue.js sejagat

nuxt.js: menyelaraskan pembangunan vue.js dengan penjanaan laman web dan statik

menyelam ke dunia Vue.js dengan koleksi buku Vue.js komprehensif SitePoint Premium. Buka kunci asas, projek praktikal, tips penting dan alat, dan banyak lagi untuk hanya $ 14.99/bulan!

Universal JavaScript (juga dikenali sebagai JavaScript isomorfik) membolehkan pelaksanaan kod pada kedua -dua klien dan pelayan. Rangka kerja JavaScript moden, seperti Vue.js, sering membina aplikasi satu halaman (SPA) untuk pengalaman dan kelajuan pengguna yang dipertingkatkan. Walau bagaimanapun, spa boleh mengalami masa pemuatan awal yang perlahan dan cabaran SEO disebabkan oleh bundle JavaScript dan batasan crawler. Aplikasi Rendering Sider (SSR) Preloads pada pelayan, menghantar HTML yang diberikan terus ke pelayar, menangani isu-isu ini.

Menyediakan SSR boleh menjadi kompleks. Nuxt.js memudahkan proses ini untuk vue.js, mengautomasikan penyampaian, penghalaan, dan konfigurasi lain.

kelebihan utama nuxt.js:

Pembangunan Vue.js yang dipermudahkan:
• Mengendalikan SSR, Routing, dan Konfigurasi Secara Automatik.
Generasi Laman Statik:
• Mewujudkan laman web statik yang setanding dengan Jekyll, meningkatkan SEO dan prestasi.
Sokongan terbina dalam:
• Mengintegrasikan Vue Router, VUEX (Pilihan), Vue Server Renderer, dan Vue-Meta.
ringan dan cekap:
• mengekalkan saiz teras kecil (57kb min gzip).
Routing Dynamic and Static Deployment:
• Mudah mewujudkan laluan dinamik dan tapak statik yang boleh digunakan pada platform seperti Firebase.
Senibina berskala:
• Sesuai untuk projek -projek dari semua saiz.

Apa itu nuxt.js?

nuxt.js adalah rangka kerja yang memudahkan aplikasi Vue.js yang diberikan pelayan dengan abstrak konfigurasi kompleks yang berkaitan dengan data asynchronous, middleware, dan penghalaan. Ia sama dengan sudut Universal dan Next.js untuk kerangka lain. Tumpuan utamanya ialah penyerahan UI, menguruskan pengedaran klien/pelayan di belakang tabir.

generasi tapak statik dengan nuxt.js:

perintah nuxt.js

membolehkan penciptaan laman web statik, menawarkan ciri -ciri yang serupa dengan penjana tapak statik seperti Jekyll.

generate

nuxt.js di bawah tudung:

Beyond Vue.js 2.0, Nuxt.js termasuk Vue Router, VUEX (pilihan kedai), Vue Server Renderer, dan Vue-Meta, menghapuskan keperluan untuk konfigurasi manual perpustakaan ini. Webpack mengendalikan bundling, pemisahan kod, dan minifikasi.

aliran kerja nuxt.js:

apabila pengguna berinteraksi dengan aplikasi nuxt.js:

1. nuxtServerInit (jika ditakrifkan) mengemas kini kedai.
2. middleware melaksanakan (global, susun atur, khusus halaman).
3. Laluan dinamik disahkan (jika validate() kaedah wujud).
4. asyncData() dan fetch() beban data untuk rendering sisi pelayan.
5. Halaman ini diberikan dengan data yang dimuatkan.

Membina blog statik tanpa pelayan dengan nuxt.js:

Bahagian ini menunjukkan mencipta blog statik mudah menggunakan nuxt.js, mengambil data dari fail JSON yang mengejek (idealnya, API akan digunakan). Pemahaman asas tentang vue.js diandaikan. Kod Lengkap boleh didapati di GitHub [GitHub Link Placeholder], dan demo boleh didapati di [Demo Link Laceholder].

Persediaan dan Konfigurasi:

Gunakan
1. untuk membuat projek baru: vue-cli vue init nuxt/starter ssr-blog
Pasang kebergantungan:
2. cd ssr-blog && npm install
Lancarkan aplikasi:
3. npm run dev
Konfigurasi
4. untuk menambah templat tajuk dan masukkan Bulma CSS: nuxt.config.js

// ./nuxt.config.js
module.exports = {
  head: {
    titleTemplate: '%s | Awesome JS SSR Blog',
    link: [
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css' }
    ]
  },
  // ...
};

Layouts Page:

Sesuaikan fail

untuk membuat susun atur asas tersuai dengan navigasi menggunakan layouts/default.vue dan komponen <nuxt-link></nuxt-link>. <nuxt></nuxt>

Halaman dan Laluan:

Buat halaman (

, pages/index.vue) sebagai komponen fail tunggal. Nuxt.js secara automatik mengendalikan penghalaan. pages/about.vue

blog laman web:

Komponen

memaparkan catatan blog terkini menggunakan komponen pages/index.vue adat (terletak di <posts></posts>). Data pos blog dimuatkan dari components/Posts.vue. posts.json

Laluan dinamik:

Buat laluan dinamik untuk jawatan blog individu menggunakan struktur

. Kaedah pages/post/_id/index.vue mengambil jawatan tertentu berdasarkan parameter asyncData(). id

Penjanaan fail statik:

Ubah suai

untuk menjana fail statik untuk laluan dinamik: nuxt.config.js

// ./nuxt.config.js
module.exports = {
  // ...
  generate: {
    routes(callback) {
      const posts = require('./posts.json');
      let routes = posts.map(post => `/post/${post.id}`);
      callback(null, routes);
    }
  }
};

run

untuk menjana fail statik dalam folder npm run generate. dist

Penyebaran Firebase:

menggunakan tapak statik ke hosting firebase menggunakan Firebase CLI.

Kesimpulan:

nuxt.js Memudahkan penyampaian pelayan dan penjanaan tapak statik untuk aplikasi Vue.js, meningkatkan prestasi dan SEO. Ciri -ciri dan kemudahan penggunaannya menjadikannya alat yang berkuasa untuk pelbagai projek.

Soalan Lazim (Soalan Lazim): (Bahagian ini kekal tidak berubah kerana ia secara langsung menjawab soalan -soalan biasa mengenai Nuxt.js)

(bahagian Soalan Lazim dari input asal disisipkan di sini)

Atas ialah kandungan terperinci Nuxt.js: rangka kerja minimalis untuk membuat aplikasi vue.js sejagat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!