Bagaimana untuk mengimport projek vue di java

Cara mengimport projek Vue ke dalam aplikasi web Java

Dalam pembangunan web hari ini, rangka kerja bahagian hadapan telah menjadi bahagian penting. Vue.js ialah rangka kerja JavaScript yang sangat berkuasa dan popular yang menyediakan satu siri alatan dan keupayaan untuk pembangunan bahagian hadapan yang cekap. Aplikasi web Java juga merupakan model pembangunan web yang sangat popular. Dalam artikel ini, kami akan menerangkan cara mengimport projek Vue ke dalam aplikasi web Java.

Membina projek Vue menggunakan Vue CLI

Vue CLI ialah alat baris arahan untuk mencipta aplikasi web Vue dengan cepat. Menggunakan Vue CLI, anda boleh membuat projek Vue dengan mudah yang boleh diimport dengan mudah ke dalam aplikasi web Java. Berikut ialah cara untuk mencipta projek Vue melalui Vue CLI.

Pertama, kita perlu memastikan npm dipasang. Buka terminal dan masukkan arahan berikut:

npm -v

Jika npm belum dipasang, sila lawati https://www.npmjs.com/get-npm untuk mendapatkan versi terkini.

Seterusnya, kita perlu memasang Vue CLI secara global. Gunakan arahan berikut untuk melakukan ini:

npm install -g vue-cli

Kini kita boleh mencipta projek Vue baharu menggunakan Vue CLI. Cipta projek menggunakan arahan berikut:

vue init webpack my-project

Ingat untuk menggantikan "projek saya" dengan nama projek anda. Ini akan mencipta projek Vue bernama "projek saya".

Seterusnya, masuk ke dalam folder projek yang baru dibuat dan pasang kebergantungan:

cd my-project
npm install

Selepas melengkapkan langkah ini, kami kini boleh melancarkan aplikasi Vue menggunakan arahan berikut:

npm run dev

Sekarang kami telah berjaya mencipta aplikasi Vue, kami boleh membina aplikasi melalui Webpack dan menyepadukannya ke dalam aplikasi web Java.

Sepadukan projek Vue ke dalam aplikasi web Java

Sebelum menyepadukan projek Vue ke dalam aplikasi web Java, kami perlu membina aplikasi menggunakan Webpack. Lakukan ini menggunakan arahan berikut:

npm run build

Ini akan membina direktori dist yang mengandungi aplikasi terbina.

Seterusnya, kami akan membenamkan aplikasi Vue yang dibina ke dalam aplikasi web Java. Kami boleh membenamkan aplikasi Vue ke dalam aplikasi web Java menggunakan Spring Boot. Spring Boot ialah rangka kerja pembangunan pesat untuk membina aplikasi web Java.

Pertama, kita perlu mencipta projek Spring Boot baharu. Cipta projek Spring Boot baharu menggunakan arahan berikut:

spring init --dependencies=web my-springboot-app
cd my-springboot-app

Kami menggunakan pilihan "web", yang menyatakan bahawa kami akan menggunakan Spring Boot untuk membina aplikasi web. Sila ambil perhatian bahawa kita perlu melaksanakan arahan ini dalam folder my-springboot-app.

Selepas mencipta projek Spring Boot, kami perlu menyalin aplikasi Vue yang dibina ke folder statik Spring Boot. Sila ambil perhatian bahawa folder statik terletak dalam direktori src/main/resources/static. Salin fail dalam direktori dist ke folder statik.

Aplikasi Vue kini sedia untuk dibenamkan ke dalam aplikasi web Java. Kita boleh mencipta kelas pengawal Spring yang mudah untuk memuatkan aplikasi Vue. Cipta kelas pengawal menggunakan kod berikut:

@Controller
public class HomeController {
    @RequestMapping("/")
    public String home() {
        return "index";
    }
}

Di sini kami telah mencipta kelas pengawal yang dipanggil HomeController yang bertanggungjawab untuk memuatkan aplikasi Vue. Kami mentakrifkan pemetaan dalam anotasi @RequestMapping("/") yang menentukan halaman utama aplikasi. Dalam kaedah rumah, kami hanya mengembalikan "indeks", yang merupakan titik masuk ke aplikasi Vue.

Akhir sekali, kami perlu mengkonfigurasi Spring Boot untuk mengenali aplikasi Vue. Kami boleh mencipta kelas konfigurasi baharu dan mengkonfigurasinya menggunakan kod berikut:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
    }
}

Di sini kami telah mencipta kelas konfigurasi yang dipanggil WebConfig. Di dalamnya, kami mengarahkan Spring Boot ke folder statik menggunakan kaedah addResourceHandlers. Sila ambil perhatian bahawa kami menggunakan "classpath:/static/" untuk memetakan folder statik ke dalam program Spring Boot. Ini membolehkan Spring Boot mengenali aplikasi Vue dan memuatkan aplikasi Vue daripada folder statik.

Kini, kami telah berjaya mengimport projek Vue ke dalam aplikasi web Java. Anda boleh menjalankan aplikasi pada mesin tempatan anda menggunakan arahan berikut:

./mvnw spring-boot:run

Kesimpulan

Dalam artikel ini, kami menerangkan cara mengimport projek Vue ke dalam aplikasi web Java. Kami menggunakan Vue CLI untuk mencipta aplikasi Vue dan menggunakan Spring Boot untuk membenamkan aplikasi Vue ke dalam aplikasi web Java. Kami juga menerangkan cara mengkonfigurasi Spring Boot untuk mengenali aplikasi Vue dan menggunakan WebMvcConfigurer untuk memetakan folder statik ke dalam aplikasi Spring Boot. Semoga artikel ini berguna kepada pembangun Java dan Vue.

Atas ialah kandungan terperinci Bagaimana untuk mengimport projek vue di java. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!