Nuxt.js dalam tindakan: Rangka kerja pemaparan bahagian pelayan Vue.js

Buat projek Nuxt.js

Pertama, pastikan anda telah memasang Node.js dan yarn atau npm. Kemudian, buat projek Nuxt.js baharu melalui baris arahan:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

Semasa proses penciptaan, anda boleh memilih sama ada anda memerlukan pilihan seperti rangka kerja UI, prapemproses, dll., dan mengkonfigurasinya mengikut keperluan.

Struktur direktori

Nuxt.js mengikut struktur direktori tertentu, beberapa direktori utama adalah seperti berikut:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

• .nuxt/: Direktori ini dijana secara automatik dan mengandungi kod yang disusun. Secara amnya, ia tidak perlu diubah suai secara langsung.
• assets/: Menyimpan sumber statik yang tidak terhimpun, seperti CSS, JavaScript dan imej. Nuxt.js akan memproses sumber ini semasa pembinaan.
• komponen/: Menyimpan komponen Vue tersuai yang boleh digunakan semula di bahagian aplikasi yang berlainan.
• susun atur/: Mentakrifkan susun atur halaman. Terdapat susun atur lalai atau berbilang susun atur khusus.
• pages/: Setiap fail sepadan dengan laluan, dan nama fail ialah nama laluan. Laluan dinamik diwakili oleh kurungan segi empat sama [].
• middleware/: Letakkan middleware tersuai, yang boleh melaksanakan logik sebelum dan selepas pemaparan halaman.
• pemalam/: Fail kemasukan tersuai untuk pemalam Vue.js.
• statik/: Disalin terus ke direktori output binaan tanpa sebarang pemprosesan, selalunya digunakan untuk menyimpan robots.txt atau favicon.ico, dsb.
• store/: Direktori pengurusan keadaan Vuex, menyimpan tindakan, mutasi, getter dan fail kemasukan keseluruhan kedai.
• nuxt.config.js: Fail konfigurasi Nuxt.js, digunakan untuk menyesuaikan tetapan projek.
• package.json: Kebergantungan projek dan konfigurasi skrip.
• yarn.lock atau npm.lock: Catatkan versi kebergantungan projek yang tepat untuk memastikan ketekalan kebergantungan dalam persekitaran yang berbeza.

Penyampaian halaman

Buat fail index.vue dalam halaman/ direktori. Ini ialah halaman utama aplikasi:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

Proses pemaparan halaman Nuxt.js dibahagikan kepada dua peringkat utama: pemaparan sebelah pelayan (SSR) dan pemaparan sebelah pelanggan (CSR). Berikut ialah langkah terperinci pemaparan halaman Nuxt.js:

Permulaan:

Pengguna memasukkan URL dalam penyemak imbas dan menghantar permintaan kepada pelayan.

Selepas pelayan menerima permintaan, ia mula memproses.

Resolusi laluan:

Nuxt.js menggunakan konfigurasi laluan dalam nuxt.config.js (jika wujud) atau menjana laluan secara automatik daripada halaman/ direktori.

Fail halaman yang sepadan dikenal pasti, seperti pages/index.vue atau pages/about.vue.

Pra-pengambilan data:

Nuxt.js mencari kaedah asyncData atau ambil dalam komponen halaman (jika wujud).

Kaedah ini akan dijalankan di bahagian pelayan untuk mendapatkan data daripada API atau sumber data lain.

Selepas data diperoleh, ia akan disiri dan disuntik ke dalam templat halaman.

Penyampaian templat:

Nuxt.js menggunakan enjin pemaparan Vue.js untuk menukar komponen dan data pra-ambil kepada rentetan HTML.
Rentetan HTML mengandungi semua data awal yang diperlukan oleh klien, sebaris dalam teg dalam format JSON.

Kembalikan HTML:

Pelayan menghantar semula respons HTML yang dijana kepada klien (pelayar).

Pemulaan pelanggan:

Selepas penyemak imbas menerima HTML, ia mula menghuraikan dan melaksanakan JavaScript sebaris.
Pustaka klien Nuxt.js (nuxt.js) dimuatkan dan dimulakan.

Rendering pelanggan:

Pustaka pelanggan mengambil alih pemaparan, tika Vue.js dibuat dan data disuntik daripada JSON sebaris ke dalam tika Vue.
Halaman melengkapkan pemaparan awal dan pengguna boleh melihat kandungan halaman lengkap.
Pada ketika ini, halaman itu interaktif dan pengguna boleh mencetuskan acara dan menavigasi.

Navigasi seterusnya:

Apabila pengguna menavigasi ke halaman lain, Nuxt.js menggunakan penghalaan sisi klien (Vue Router) untuk lompatan bukan muat semula.
Jika halaman baharu memerlukan data, kaedah asyncData atau fetch akan dijalankan pada klien, ambil data baharu dan kemas kini paparan.

SSG (Penjanaan Tapak Statik):

Di luar pembangunan, anda boleh menggunakan perintah jana nuxt untuk menjana fail HTML statik.

Setiap halaman akan diprapaparkan sebagai fail HTML yang berasingan dengan semua data dan sumber yang diperlukan.

Menggunakan asyncData

Kaedah asyncData adalah unik untuk Nuxt.js dan membolehkan anda pra-mengambil data pada pelayan dan menggunakannya semula pada klien. Dalam contoh di atas, kami hanya menukar nilai mesej, tetapi dalam aplikasi sebenar, anda mungkin memanggil API untuk mengambil data di sini.

Middleware

Perisian Tengah (Middleware) ialah ciri yang membolehkan anda melaksanakan logik tertentu sebelum dan selepas perubahan laluan. Middleware boleh digunakan secara global, pada peringkat halaman atau pada peringkat susun atur untuk mengendalikan tugas seperti pengesahan, pramuat data, pengawal laluan, dll.

1. Perisian tengah global

Perisian tengah global dikonfigurasikan dalam fail nuxt.config.js dan mempengaruhi semua halaman dalam aplikasi:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

Fail middleware biasanya terletak di middleware/direktori, seperti middleware/globalMiddleware1.js:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

2. Perisian tengah peringkat halaman

Perisian tengah peringkat halaman hanya mempengaruhi halaman tertentu. Isytihar perisian tengah dalam komponen halaman:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

Fail middleware yang sepadan terletak dalam middleware/direktori, contohnya, middleware/pageMiddleware.js:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3. Perisian tengah peringkat susun atur

Perisian tengah peringkat reka letak adalah serupa dengan peringkat halaman, tetapi ia digunakan pada semua halaman yang menggunakan reka letak. Isytihar perisian tengah dalam komponen reka letak:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

Fail middleware yang sepadan terletak dalam middleware/direktori:

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

Konteks middleware

Fungsi middleware menerima objek konteks sebagai parameter, yang mengandungi sifat berikut:

• req (objek permintaan HTTP, sah hanya pada bahagian pelayan)

• res (objek tindak balas HTTP, sah hanya pada bahagian pelayan)

• ubah hala (fungsi digunakan untuk ubah hala)

• apl (contoh Vue)

• laluan (maklumat laluan semasa)

• kedai (Kedai Vuex, jika didayakan)

• muatan (jika terdapat data yang dikembalikan oleh asyncData)

Perisian tengah boleh dilaksanakan secara berurutan, dan setiap perisian tengah boleh memutuskan sama ada untuk terus melaksanakan perisian tengah seterusnya dalam rantaian atau mengganggu laluan melalui fungsi ubah hala.

Penghalaan Dinamik

Nuxt.js menyokong penghalaan dinamik, yang sangat berguna untuk mengendalikan kandungan dengan ID dinamik seperti catatan blog, profil pengguna, dll. Buat fail penghalaan dinamik dalam halaman/ direktori, seperti [id].vue:

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

Di sini [id] mewakili parameter dinamik, asyncData akan memproses parameter ini secara automatik dan mendapatkan catatan blog dengan ID yang sepadan.

Reka letak
Reka letak membolehkan anda menentukan struktur umum halaman global atau khusus. Cipta fail default.vue dalam susun atur/ direktori:

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

Secara lalai, semua halaman akan menggunakan reka letak ini. Jika anda ingin menetapkan reka letak yang berbeza untuk halaman tertentu, anda boleh menentukannya dalam komponen halaman:

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

Pemalam dan integrasi perpustakaan
Nuxt.js menyokong pemalam Vue.js, yang boleh anda konfigurasikan dalam nuxt.config.js:

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

Kemudian buat fail yang sepadan dalam pemalam/ direktori, seperti vuetify.js:

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

Konfigurasi dan Pengoptimuman

Fail Konfigurasi Nuxt.js (nuxt.config.js)

nuxt.config.js ialah fail konfigurasi utama untuk aplikasi Nuxt, yang digunakan untuk menyesuaikan gelagat aplikasi. Berikut ialah beberapa item konfigurasi yang biasa digunakan:

• mod: Tetapkan mod larian aplikasi. Nilai pilihan ialah 'spa' (aplikasi satu halaman), 'universal' (perenderan bahagian pelayan) dan 'statik' (penjanaan statik). Lalai ialah 'universal'.
• kepala: Konfigurasikan bahagian halaman, seperti tajuk, metadata, pautan, dll.
• css: Tentukan fail CSS global, yang boleh menjadi tatasusunan laluan fail.
• bina: Konfigurasikan proses binaan, seperti transpile, extractCSS, extend, dll. Contohnya, anda boleh menambah pemalam Babel atau melaraskan konfigurasi Webpack di sini.
• penghala: Sesuaikan konfigurasi penghalaan, seperti laluan asas, mod, dsb.
• axios: Konfigurasikan modul axios, termasuk URL asas, tetapan proksi, dsb.
• plugin: Daftar pemalam Vue global, yang boleh ditentukan untuk dimuatkan pada klien atau pelayan.
• modul: Muatkan modul luaran, seperti @nuxtjs/axios, @nuxtjs/proxy, dsb.
• env: Tentukan pembolehubah persekitaran, yang akan disuntik ke dalam klien dan pelayan pada masa binaan.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

Strategi pengoptimuman

• Prafetch data tak segerak (asyncData/fetch): Gunakan kaedah asyncData atau ambil untuk prafetch data pada bahagian pelayan untuk mengurangkan beban pemaparan klien.
• Pembahagian kod: Nuxt.js membahagikan kod secara automatik untuk memastikan kod yang berkaitan dimuatkan hanya apabila laluan itu dilawati.
• Penjanaan tapak statik (SSG): Gunakan perintah jana nuxt untuk menjana fail HTML statik, yang sesuai untuk tapak dengan perubahan kandungan yang jarang berlaku, meningkatkan kelajuan pemuatan dan kemesraan SEO.
• Strategi cache: Gunakan strategi cache HTTP seperti ETag dan Last-Modified untuk mengurangkan permintaan pendua.
• Pengoptimuman Vue.js: Pastikan pengoptimuman komponen Vue, seperti mengelakkan pemerhati yang tidak berguna, menggunakan v-sekali untuk mengurangkan pemaparan semula, dsb.
• Pengoptimuman imej: Gunakan format imej yang betul (seperti WebP), pastikan saiz imej sesuai dan gunakan teknologi pemuatan malas.
• Service Worker: Sepadukan sokongan PWA dan gunakan Service Worker untuk caching luar talian dan pemberitahuan tolak.
• Tree Shaking: Pastikan kebergantungan anda menyokong Tree Shaking untuk mengalih keluar kod yang tidak digunakan.
• Analisis dan Pemantauan: Gunakan binaan nuxt --analisis atau integrasikan alatan pihak ketiga (seperti Google Lighthouse) untuk analisis prestasi bagi memantau prestasi aplikasi secara berterusan.

Penjanaan Tapak Statik (SSG)

Penjanaan tapak statik (SSG) Nuxt.js dilaksanakan melalui arahan jana nuxt. Perintah ini merentasi laluan aplikasi dan menjana fail HTML pra-diberikan untuk setiap laluan, yang boleh digunakan terus ke mana-mana perkhidmatan pengehosan fail statik. Berikut ialah beberapa perkara penting tentang SSG:

1. Konfigurasi: Dalam fail nuxt.config.js, anda boleh mengkonfigurasi pilihan jana untuk mengawal tingkah laku penjanaan statik:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2. Jana: Jalankan npm run generate atau yarn generate untuk memulakan proses penjanaan statik. Nuxt.js akan menjana fail HTML yang sepadan mengikut konfigurasi dalam generate.routes. Jika tidak ditakrifkan dengan jelas, ia akan mengimbas secara automatik semua fail di bawah halaman/ direktori untuk menjana laluan.

3. Praambil data: Dalam komponen halaman, anda boleh menggunakan kaedah asyncData atau ambil untuk praambil data. Data ini akan disuntik ke dalam HTML apabila halaman statik dijana, supaya halaman itu tidak memerlukan permintaan tambahan apabila klien memuatkan:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

4. Pemprosesan perisian tengah: Perisian tengah sisi pelayan tidak akan dilaksanakan semasa proses SSG kerana SSG menjana fail statik tanpa persekitaran pelayan. Oleh itu, jika anda perlu melaksanakan beberapa logik semasa menjana, sebaiknya kendalikannya dalam asyncData atau ambil.

5. Deployment: Fail statik yang dijana boleh digunakan ke mana-mana perkhidmatan pengehosan fail statik, seperti Netlify, Vercel, GitHub Pages atau AWS S3. Perkhidmatan ini biasanya tidak memerlukan menjalankan sebarang kod sebelah pelayan, cuma muat naik folder dist yang dijana.

6. Pengoptimuman SEO: SSG mempertingkatkan SEO kerana perangkak enjin carian boleh membaca kandungan HTML yang diprapaparkan tanpa menunggu JavaScript untuk dilaksanakan.

7. Laluan Dinamik: Untuk laluan dinamik, Nuxt.js akan cuba menjana semua kombinasi yang mungkin. Jika semua laluan dinamik yang mungkin tidak dapat diramalkan, ia boleh ditentukan secara manual dalam generate.routes, atau dikawal menggunakan generate.includePaths dan generate.excludePaths.

8. Halaman 404: Menetapkan generate.fallback kepada benar akan menjana halaman 404 untuk laluan dinamik yang tidak diprapaparkan. Apabila pengguna melawati laluan ini, Nuxt.js akan cuba memaparkannya di sisi pelanggan.

Jalankan perintah jana nuxt dan Nuxt.js akan menjana fail HTML statik.

Pengesahan dan Pengendalian Ralat

Pengesahan

Pengesahan biasanya melibatkan pengesahan input data borang atau permintaan API. Nuxt.js sendiri tidak menyediakan perpustakaan pengesahan secara langsung, tetapi anda boleh menyepadukan perpustakaan pihak ketiga seperti Vuelidate, vee-validate atau menggunakan TypeScript untuk semakan jenis.

Menggunakan Vee-Validate
1. Pemasangan: Pertama, anda perlu memasang pustaka vee-validate:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2. Konfigurasi: Tambahkan konfigurasi pemalam Vue dalam nuxt.config.js:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3. Cipta pemalam: Konfigurasikan Vee-Validate dalam plugins/vee-validate.js:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

4. Penggunaan: Gunakan Vee-Validate untuk pengesahan borang dalam komponen anda:

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

Ralat pengendalian

Nuxt.js menyediakan beberapa cara untuk mengendalikan ralat, termasuk pengendalian ralat global dan pengendalian ralat khusus halaman.

Pengendalian ralat global

• Halaman ralat tersuai: Buat fail error.vue dalam direktori susun atur untuk menyesuaikan reka letak halaman ralat.
• Tangkap ralat global: Konfigurasikan sifat ralat dalam nuxt.config.js untuk menangkap ralat global:

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

Pengendalian ralat khusus halaman

Dalam komponen halaman, anda boleh menggunakan struktur cuba-tangkap kaedah asyncData atau ambil untuk mengendalikan ralat:

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

Pengendalian ralat permintaan API

Untuk permintaan API, jika anda menggunakan modul @nuxtjs/axios, anda boleh mengendalikan ralat secara seragam dalam pemintas permintaan:

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

Pastikan mendaftar pemalam ini dalam nuxt.config.js.

Integrasi Ekosistem Vue

Penghala Vue:

Nuxt.js secara automatik menjana sistem penghalaan untuk aplikasi anda berdasarkan struktur fail. Konfigurasi penghalaan biasanya tidak perlu ditulis secara manual, tetapi boleh dilanjutkan melalui sifat penghala nuxt.config.js.

Vuex:

Nuxt.js mencipta kedai Vuex secara automatik. Di bawah direktori kedai, anda boleh membuat keadaan modular, mutasi, tindakan dan pengambil. Contohnya, buat fail store/modules/users.js untuk mengurus data pengguna.

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

Vue CLI:

Nuxt.js menyediakan alat binaannya sendiri, tetapi ia juga berdasarkan Vue CLI. Ini bermakna anda boleh menggunakan alatan baris perintah yang serupa dengan Vue CLI, seperti npx nuxt generate (generasi statik) atau npx nuxt build (build application).

Babel:

Nuxt.js dikonfigurasikan dengan Babel secara lalai untuk menyokong ciri JavaScript terkini. Anda biasanya tidak perlu mengkonfigurasi Babel secara manual melainkan terdapat keperluan khas.

TypeScript:

Untuk menggunakan TypeScript, tetapkan typescript: true dalam nuxt.config.js dan Nuxt.js akan mengkonfigurasi sokongan TypeScript secara automatik.

ESLint:

Untuk semakan kualiti kod, anda boleh memasang ESLint dalam projek anda dan mengkonfigurasi .eslintrc.js. Nuxt.js menyediakan pemalam @nuxt/eslint-module untuk memudahkan penyepaduan.

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

VueUse:

VueUse ialah perpustakaan kes penggunaan Vue yang mengandungi pelbagai fungsi praktikal. Untuk menyepadukan, mula-mula pasang @vueuse/core, kemudian import dan gunakan fungsi dalam komponen anda.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

Pemalam Vue:

Anda boleh mendaftarkan pemalam Vue secara global melalui item konfigurasi pemalam dalam nuxt.config.js. Contohnya, integrasikan Vue Toastify untuk memaparkan pemberitahuan:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

Aliran kerja menggunakan Nuxt.js

Nuxt.js menyediakan aliran kerja yang lengkap untuk pembangunan, pembinaan dan penggunaan. Gunakan arahan nuxt untuk memulakan pelayan pembangunan, binaan nuxt untuk bangunan pengeluaran, mula nuxt untuk memulakan pelayan pengeluaran dan jana nuxt untuk menjana fail statik.

Pengoptimuman prestasi

1. Penjanaan statik (SSG): Gunakan perintah jana nuxt untuk menjana fail HTML pra-diberikan, yang boleh meningkatkan kelajuan pemuatan skrin pertama dan mesra SEO.

2. Pembahagian kod: Nuxt.js akan melakukan pemisahan kod secara lalai, membahagikan aplikasi kepada berbilang blok kecil dan hanya memuatkan kod yang diperlukan oleh halaman semasa, mengurangkan volum pemuatan awal.

3. Pemuatan malas: Untuk aplikasi besar, anda boleh mempertimbangkan komponen atau modul memuatkan malas dan hanya memuatkannya apabila diperlukan. Anda boleh menggunakan atau digabungkan dengan komponen async untuk mencapai ini.

4. Optimumkan sumber:

• Imej: Gunakan format yang betul (seperti WebP), mampatkan imej, gunakan pemuatan malas (), atau gunakan nuxt- komponen imej atau nuxt-picture.

• CSS: Ekstrak CSS ke fail berasingan dan kurangkan gaya sebaris.

• JS: Gunakan Tree Shaking untuk mengalih keluar kod yang tidak digunakan.

1. Prafetching data tak segerak: Gunakan kaedah asyncData atau ambil untuk pramuat data bagi memastikan data sedia sebelum dipaparkan.

2. Caching sebelah pelayan: Gunakan modul nuxt-ssr-cache untuk cache hasil pemaparan sebelah pelayan dan mengurangkan panggilan API yang tidak diperlukan.

3. Caching HTTP: Tetapkan pengepala cache yang betul (seperti Cache-Control) dan gunakan penyemak imbas untuk cache sumber statik.

4. Pengawal laluan: Gunakan pengawal laluan seperti beforeRouteEnter untuk mengelakkan memuatkan data apabila ia tidak diperlukan.

5. Kurangkan permintaan HTTP: Gabungkan berbilang fail CSS dan JS untuk mengurangkan bilangan permintaan HTTP.

6. Optimumkan prestasi API: Optimumkan antara muka hujung belakang, kurangkan masa tindak balas dan gunakan strategi halaman, penapisan dan caching.

7. Leverage CDN: Hos sumber statik pada CDN untuk mempercepatkan pemuatan untuk pengguna global.

8. Optimumkan pengurusan negeri Vuex: Elakkan sifat yang dikira dan pendengar yang tidak perlu untuk mengurangkan overhed perubahan keadaan.

9. Audit prestasi: Gunakan Lighthouse, Chrome DevTools atau alatan audit prestasi lain untuk menyemak prestasi aplikasi secara kerap dan membuat penambahbaikan berdasarkan laporan.

10. Pekerja Perkhidmatan: Jika berkenaan, sepadukan ciri PWA dan gunakan Pekerja Perkhidmatan untuk caching luar talian dan pramuat sumber.

11. Pengoptimuman modul: Pilih modul pihak ketiga berprestasi tinggi dan pastikan modul tersebut dioptimumkan untuk SSR.

Atas ialah kandungan terperinci Nuxt.js dalam tindakan: Rangka kerja pemaparan bahagian pelayan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!