Cara menggunakan projek Vue.js ke persekitaran Node.js

Dengan pembangunan berterusan teknologi bahagian hadapan, semakin banyak projek bahagian hadapan perlu berinteraksi dengan bahagian belakang untuk mencapai lebih banyak fungsi. Sebagai rangka kerja bahagian hadapan yang ringan, Vue.js telah digunakan secara meluas dalam pembangunan bahagian hadapan. Node.js ialah persekitaran JavaScript back-end sumber terbuka yang membolehkan JavaScript dijalankan di bahagian pelayan. Dalam artikel ini, kita akan mempelajari cara untuk menggunakan projek Vue.js ke dalam persekitaran Node.js.

Langkah 1: Buat projek Vue.js

Mula-mula, kita perlu mencipta projek Vue.js. Kita boleh menggunakan Vue CLI untuk mencipta struktur projek standard Vue.js dengan cepat.

Untuk mencipta projek Vue.js, ikut langkah berikut:

1. Pasang Vue CLI menggunakan arahan berikut dalam terminal:

npm install -g @vue/cli

2. Buat projek Vue.js baharu menggunakan arahan berikut:

vue create my-project

3. Jalankan arahan berikut untuk memulakan pelayan pembangunan Vue.js:

cd my-project
npm run serve

Kini, kami telah mencipta projek Vue.js dan memulakannya pada pelayan pembangunan. Kami boleh menggunakan pelayar untuk mengakses pelayan ini dan melihat projek kami.

Langkah 2: Bina projek Vue.js

Setelah kami menyelesaikan pembangunan projek Vue.js, kami perlu membinanya ke dalam fail yang diperlukan untuk persekitaran pengeluaran. Vue CLI telah membantu kami menyediakan arahan bina, kami hanya perlu menjalankan arahan berikut:

npm run build

Arahan ini akan membina projek Vue.js kami dan menyimpan semua fail yang dijana dalam folder "dist". Fail ini termasuk HTML, CSS, JavaScript dan fail sumber lain yang diperlukan.

Langkah Tiga: Cipta Pelayan Node.js

Sekarang, kami perlu mencipta pelayan Node.js untuk projek Vue.js kami. Kami boleh menggunakan rangka kerja ekspres Node.js untuk mencipta pelayan kami.

Untuk mencipta pelayan Node.js, ikuti langkah berikut:

1. Pasang rangka kerja ekspres menggunakan arahan berikut:

npm install express --save

2. Buat folder baharu dalam direktori akar projek Vue.js kami dan namakannya "pelayan".
3. Buat fail JavaScript baharu dalam folder "pelayan" dan namakannya "index.js".
4. Dalam fail "index.js", masukkan kod berikut untuk mencipta pelayan HTTP mudah:

const express = require('express')
const app = express()

app.use(express.static('dist'))

app.listen(3000, () => {
  console.log('Listening on port 3000')
})

Kod ini akan memulakan pelayan HTTP mudah dan Layankan semua fail dalam folder "dist" sebagai fail statik. Kami boleh mengakses pelayan ini dalam pelayar dan melihat projek Vue.js kami.

Langkah 4: Letak projek Vue.js ke pelayan Node.js

Akhir sekali, kami perlu menggunakan projek Vue.js kami ke pelayan Node.js kami.

Untuk menggunakan projek Vue.js anda, ikut langkah berikut:

1. Salin folder "dist" projek Vue.js kami ke dalam pelayan Node.js kami. Anda boleh menggunakan FTP atau alat pemindahan fail lain untuk menyelesaikan proses ini.
2. Dalam pelayan Node.js, pergi ke folder "dist" projek Vue.js kami.
3. Jalankan arahan berikut untuk memulakan pelayan Node.js kami:

node server/index.js

Kini, projek Vue.js kami telah berjaya digunakan ke pelayan Node.js. Kami boleh mengakses pelayan ini dalam pelayar dan melihat projek Vue.js kami.

Ringkasan

Artikel ini memperkenalkan cara untuk menggunakan projek Vue.js ke persekitaran Node.js. Kami mula-mula mencipta projek Vue.js menggunakan Vue CLI dan membina projek menggunakan arahan binaan npm run. Kami kemudiannya mencipta pelayan Node.js mudah menggunakan rangka kerja ekspres dan akhirnya menggunakan projek Vue.js kami ke pelayan ini. Saya harap artikel ini akan memberi inspirasi kepada pembangun Vue.js dan Node.js serta membantu merealisasikan projek yang lebih menarik.

Atas ialah kandungan terperinci Cara menggunakan projek Vue.js ke persekitaran Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!