Rumah > Artikel > hujung hadapan web > Bercakap tentang kaedah penggunaan pelayan dan klien dalam rangka kerja Vue
Bercakap tentang kaedah penggunaan pelayan dan klien dalam rangka kerja Vue
- PHPzasal
- 2023-04-17 10:30:021087semak imbas
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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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 src="./path/to/vue.js"></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(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</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()
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
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(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>${html}</body>
</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
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!