Bagaimana untuk merujuk vue dalam nodejs

Dengan populariti Vue, semakin ramai pembangun mahu menggunakan Vue dalam Node.js. Jadi, bagaimana untuk merujuk Vue dalam Nodejs? Artikel ini akan merangkumi aspek ini secara terperinci.

Pertama sekali, perlu jelas bahawa Node.js, sebagai persekitaran berjalan JavaScript sebelah pelayan, tidak boleh memaparkan komponen Vue secara langsung. Walau bagaimanapun, terdapat beberapa cara kita boleh menggunakan Node.js dengan Vue, yang paling biasa digunakan ialah menggunakan mod SSR (Perenderan Sisi Pelayan) Vue.

Menggunakan mod SSR membolehkan kami menyusun komponen Vue di bahagian pelayan dan mengeluarkan fail HTML ke penyemak imbas. Ini boleh meningkatkan kelajuan pemaparan halaman dan lebih kondusif untuk pengoptimuman SEO. Seterusnya, kami akan menggunakan SSR untuk merujuk Vue sebagai contoh untuk memperkenalkan cara menggunakan Node.js untuk merujuk Vue.

1. Pasang Vue

Mula-mula, kita perlu memasang Vue dalam Node.js. Anda boleh menggunakan npm untuk memasang:

npm install vue

2. Tulis komponen Vue

Seterusnya, kita perlu menulis komponen Vue. Dalam artikel ini, kami hanya memerlukan komponen mudah untuk ditunjukkan, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

Dalam komponen ini, kami hanya mengeluarkan mesej ringkas: Hello, Vue!.

3. Menggunakan Vue SSR

Seterusnya, kita perlu prakompil menggunakan mod SSR Vue. Dalam Node.js, kita boleh menggunakan kaedah createRenderer dalam Vue SSR untuk menyusun semula. Ia akan mengembalikan pemapar yang boleh kami gunakan untuk memaparkan komponen Vue seperti yang ditunjukkan di bawah:

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

renderer.renderToString(new Vue({
  template: '<div>Vue组件</div>'
}), (err, html) => {
  console.log(html) // 输出预编译后的HTML
})

Dalam kod ini, kami mula-mula memperkenalkan kebergantungan vue dan vue-server-renderer dan menggunakan kaedah createRenderer mencipta pemapar . Kemudian, kami memanggil kaedah renderToString, gunakan komponen Vue yang telah dikompilasi untuk membuat dan mengeluarkan fail HTML. Seperti yang anda lihat di sini, kita perlu menukar komponen Vue kepada templat sebelum ia boleh digunakan.

4. Tukar komponen kepada templat

Dalam proses menggunakan SSR, kita perlu menukar komponen Vue kepada templat. Kita boleh menggunakan beberapa alatan untuk mengendalikan proses penukaran ini. Sebagai contoh, kita boleh memasang vue-template-compiler untuk menukar:

npm install vue-template-compiler

Kemudian kita boleh menggunakan kaedah vue-template-compiler's compile untuk menukar komponen Vue kepada templat, seperti ini:

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

const template = compiler.compile('<div>Hello, {{ name }}!</div>').render
const context = { name: 'Vue' }

renderer.renderToString(new Vue({
  template: template,
  data: context
}), (err, html) => {
  console.log(html) // 输出预编译后的HTML
})

Dalam kod ini, kami menggunakan kaedah vue-template-compiler compile untuk menukar komponen Vue kepada templat dan menghantar konteks pemaparan (iaitu, data komponen) ke pemapar untuk pemaparan.

5. Kesimpulan

Dalam artikel ini, kami memperkenalkan cara merujuk Vue dalam Node.js dan menggunakan mod SSRnya untuk prapengumpulan. Perlu diingatkan bahawa menggunakan SSR memerlukan komponen Vue prapenyusun pada bahagian pelayan, jadi ia akan menduduki sumber pelayan. Oleh itu, dalam pembangunan sebenar, kita perlu menimbang kaedah penggunaan SSR dan pemaparan hadapan yang lebih sesuai untuk senario aplikasi kita.

Atas ialah kandungan terperinci Bagaimana untuk merujuk vue dalam nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!