Bercakap tentang kaedah penggunaan pelayan dan klien dalam rangka kerja Vue

Rangka kerja Vue ialah rangka kerja bahagian hadapan JavaScript yang sangat popular Ia adalah rangka kerja yang dibangunkan oleh Evan You yang memfokuskan pada memahami corak MVVM yang lebih lancar dan cekap. Kemunculannya membolehkan pembangun bahagian hadapan untuk lebih mudah membangunkan aplikasi web dengan pengalaman pengguna yang baik. Artikel ini akan memperkenalkan kaedah penggunaan pelayan dan pelanggan rangka kerja Vue untuk membantu pembaca menguasai kemahiran penggunaan rangka kerja dengan lebih baik.

1. Pengerahan pelanggan

Pengerahan rangka kerja Vue pelanggan adalah agak mudah Anda hanya perlu memperkenalkan fail rangka kerja ke dalam fail HTML. Terdapat dua kaedah pengenalan yang biasa digunakan >

1. Gunakan CDN untuk mengimport:

Anda boleh terus menggunakan alamat CDN rasmi Vue untuk mengimport fail Vue.js dalam fail HTML, contohnya:

<script></script>

2 . Muat turun fail sumber Import:

Anda juga boleh memuat turun terus kod sumber Vue, dan kemudian memperkenalkan fail yang sepadan dalam fail HTML, contohnya:

<script></script>

Selepas mengimport, anda boleh menggunakan rangka kerja Vue secara langsung.

2. Pengerahan bahagian pelayan

Sebelum menggunakan rangka kerja Vue pada bahagian pelayan, anda perlu memasang persekitaran Node.js yang berkaitan terlebih dahulu. Selepas persekitaran Node.js sedia, anda boleh mula membangunkan pemaparan bahagian pelayan Vue.

1. Penciptaan dan konfigurasi projek

Selepas membuat projek, anda perlu memperkenalkan kebergantungan yang berkaitan dalam fail

Kebergantungan yang berkaitan dengan pemaparan pelayan Vue dan Vue adalah seperti berikut: package.json

{
  "dependencies": {
    "vue": "^2.5.0",
    "vue-server-renderer": "^2.5.0"
  }
}

2. Penulisan kod sebelah pelayan

Seterusnya, anda perlu menulis kod sebelah pelayan, gunakan rangka kerja

dalam Node.js untuk membina projek, dan kemudian tambah Pelayan Vue memberikan middleware kepada projek . Contohnya: express

const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('*', (req, res) => {
  const vm = new Vue({
    template: '<div>Hello {{ name }}</div>',
    data: {
      name: 'Vue SSR'
    }
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      nbsp;html>
      
        <title>Hello</title>
        ${html}
      
    `)
  })
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Server started at localhost:${port}`)
})

Kod di atas hanya melaksanakan fungsi asas Vue SSR Selepas pelayan dimulakan, kandungan halaman yang diberikan oleh komponen Vue akan dikembalikan apabila halaman itu diakses.

Seperti yang anda lihat, kaedah

dalam vue-server-renderer digunakan dalam kod untuk mencipta objek pemapar dan menghantar objek sebagai parameter templat kepada kaedah createRenderer(), yang bertanggungjawab untuk pemaparan komponen Vue ke dalam rentetan HTML dan kembalikan hasilnya ke halaman hujung hadapan. renderToString()

3. Konfigurasikan Webpack

Jika Webpack digunakan dalam projek, peraturan kompilasi fail Vue perlu ditetapkan dalam fail konfigurasi Webpack, contohnya:

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

Dalam kod di atas Gunakan

untuk memproses vue-loader fail dengan Webpack, terutamanya untuk menukar .vue taip fail kepada kod js yang boleh dijalankan. .vue

4. Konfigurasi penghalaan pemaparan sebelah pelayan

Apabila menggunakan Vue SSR, konfigurasi penghalaan perlu dilakukan dalam projek untuk memaparkan kandungan permintaan penghalaan dengan betul. Contohnya:

const Vue = require('vue')
const express = require('express')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('*', (req, res) => {
  const vm = new Vue({
    template: `<div>Hello {{ name }}！</div>`,
    data: {
      name: 'Vue SSR'
    }
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      return res.status(500).end('Internal Server Error')
    }
    res.end(`
      nbsp;html>
      
        
          <meta>
          <title>Hello</title>
        
        ${html}
      
    `)
  })
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Server started at localhost:${port}`)
})

Kod di atas menggunakan rangka kerja

untuk mengkonfigurasi penghalaan, memaparkan keseluruhan halaman selepas menilai permintaan penghalaan dan mengembalikannya kepada penyemak imbas. express

Ringkasan

Artikel ini memperkenalkan secara ringkas kaedah penggunaan asas pelayan dan klien Vue Anda perlu memilih kaedah penggunaan yang sesuai semasa membangunkan projek. Untuk projek yang hanya perlu memaparkan halaman statik, gunakan kaedah penggunaan klien. Untuk projek yang memerlukan paparan dinamik data atau penambahbaikan SEO, adalah disyorkan untuk menggunakan penggunaan pemaparan sebelah pelayan. Saya harap artikel ini dapat membantu pembaca dan membolehkan anda menguasai kemahiran menggunakan rangka kerja Vue dengan lebih baik.

Atas ialah kandungan terperinci Bercakap tentang kaedah penggunaan pelayan dan klien dalam rangka kerja Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!