Laravel-ийг Vue.js-тэй хэрхэн ашиглах вэ 3

Vue.js нь вэб интерфэйс болон нэг хуудасны програмуудыг бий болгоход хамгийн их ашиглагддаг JavaScript фрэймворкуудын нэг бөгөөд Laravel-ийн хамтаар маш хүчирхэг хөгжүүлэлтийн хэрэгсэл болдог.

Вэб програмыг хөгжүүлэхэд өргөн хэрэглэгддэг хэрэгсэл бол vuejs бөгөөд энэ нийтлэлд бид үүнийг Laravel-тэй хэрхэн суулгаж, ашиглах талаар үзэх болно. Vue.js хүрээ нь байсан defiнито дэвшилтэт хүрээ Учир нь энэ нь HTML харагдац үүсгэх чиглэлээр мэргэшсэн бөгөөд бусад номын сан, төслийн бүрэлдэхүүн хэсгүүдтэй хялбархан нэгтгэх боломжийг олгодог.

Vue.js-ийн амжилт нь бас сонголттой холбоотой Лараэлэл үүнийг frontend framework болгон санал болгож, улмаар 2.0 хувилбарыг гаргахад хүргэж байна.

Laravel төсөл бий болгох

Мэдээжийн хэрэг эхний алхам бол Ларавелд шинэ төсөл бий болгох явдал юм. Хэрэв таны компьютер дээр компьютер байгаа бол үүнийг ашигла эсвэл зөвхөн энэ зааварт зориулж шинээр үүсгэж болно.

composer create-project laravel/laravel guide-laravel-vue

Төсөл эхэлсний дараа та суулгах хэрэгтэй болно npm донтолт. Үүнийг хийхийн тулд төслийн лавлах доторх дараах тушаалыг ажиллуулна уу:

npm install

Хамааралуудыг суулгасны дараа нөөцийг бүрдүүлэхийн тулд дараах тушаалыг ажиллуулж, бүх зүйл үнэхээр ажиллаж байгаа эсэхийг шалгаарай.

npm run dev

Тушаал npm run dev ялангуяа төрөл бүрийн шалгалт, бүтээн байгуулалтыг гүйцэтгэдэг Laravel Mix файлыг эмхэтгэх resources/js/app.js болон файл resources/css/app.css файлуудад public/js/app.js e public/css/app.css.

Хэрэв бүх зүйл хэвийн ажиллаж байвал та дараах зүйлийг харах болно.

Vue.js суулгаж байна

Laravel төслийг бэлтгэсний дараа бид Vue.js 3-г суулгаж болно. Үүнийг хийхийн тулд төслийн лавлахдаа дараах тушаалыг ажиллуулна уу:

npm install --save-dev vue

Энэ нь Vue.js-ийг хөгжүүлэлтийн хамаарлын нэг болгон суулгах болно. Хөрөнгийг хөрвүүлсний дараа таны үйлдвэрлэлийн JavaScript файл бие даасан байх тул та Vue.js-ийг хөгжүүлэлтийн хамаарал болгон суулгахад л хангалттай.

Vue 3 зөв суулгасан эсэхийг шалгахын тулд файлыг нээнэ үү package.json (төслийн үндэс дээр байгаа) болон хайх "vue" хэсэгт "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Таны харж байгаагаар хувилбарын дугаар нь Vue.js 3 суулгасан болохыг харуулж байна. 

Vue.js-ийн анхны оролдлого

Welcome.blade.php файлдаа дараах кодыг оруулна уу:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Таны харж байгаагаар бид элемент үүсгэсэн div шийдэлийг id "vue-app“. Скриптийн элемент дотор бид Vue-ийн жишээг үүсгэсэн бөгөөд бид бүтээгч рүү объектыг дамжуулах боломжийг олгодог. defiМанай тохиолдолд өгөгдөл, зан төлөв гэх мэт хэрэглээний зарим параметрүүдийг:

• el: Элементийн лавлагаа div defihtml дээр дууссан
• огноо: өгөгдлийн багц

Объект үүссэн даруйд Vue -ийг олж авдаг div шийдэлийг id vue-app мөн орлуулагчийг солих асуудлыг хариуцна {{ text }} өгөгдлийн объектод агуулагдах утгын хамт. Мэдээжийн хэрэг, энэ объект нь өөр өөр төрлийн нэгээс олон шинж чанарыг агуулж болно: тоо, массив болон бусад үүрлэсэн объектууд хүчинтэй байна.

Энэхүү орлуулалтаас гадна Vue нь хөдөлгүүрээ идэвхжүүлж, програмыг хариу үйлдэл үзүүлэх чадвартай болгосон, өөрөөр хэлбэл текстийн шинж чанарт гарсан аливаа өөрчлөлт нь HTML дахь харгалзах элементийг шуурхай шинэчлэхэд хүргэдэг.

Vue.js-ийн хоёр дахь туршилт

Хоёрдахь туршилтыг үргэлжлүүлэхийн тулд та эхлээд шинэ бүрэлдэхүүн хэсэг үүсгэхийн тулд програмыг эхлүүлэх хэрэгтэй. Та нээ resources/app.js (o resources/js/app.js) болон түүний агуулгыг дараах байдлаар шинэчилнэ үү.

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

Энэ файлд бид шинэ Vue.js жишээ үүсгэж байгаа бөгөөд үүнийг хийхийн тулд бидэнд HelloVue.vue гэж нэрлэсэн Vue бүрэлдэхүүн хэрэгтэй. Дэлгэрэнгүй мэдээллийг албан ёсны баримт бичигтэй танилцана уу . 

Шинэ файл үүсгэх resources/components/HelloVue.vue мөн дараах кодыг оруулна уу:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

Бидний саяхан үүсгэсэн файл бол хэвлэдэг үндсэн Vue.js бүрэлдэхүүн хэсэг юм Hello Vue! ирж header1 хуудсан дээр. Эцэст нь нээнэ үү webpack.mix.js төслийн үндэс дэх файлыг үүсгээд агуулгыг нь дараах байдлаар шинэчилнэ үү.

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Энэ файлд аргын дуудлага байна .vue() дурын Vue.js кодыг эмхэтгэж, үйлдвэрлэлийн JavaScript файлд багцлана. Функц нь боломжтой объектыг хүлээн авдаг defiТаны ашиглаж байгаа Vue.js хувилбарыг шалгана уу. 

Файлыг засварласны дараа webpack.mix.js та javascript кодыг эмхэтгэх хэрэгтэй. Үүнийг хийхийн тулд бид тушаалыг дахин ажиллуулна npm run dev.

Эцэст нь Vue-г ажиллуулахын тулд файлыг нээнэ үү resources/views/welcome.blade.php мөн дараах кодыг оруулна уу:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

Код нь өмнө нь үүсгэсэн бүрэлдэхүүн хэсэгтэй хамт видео мессеж үүсгэх болно Сайн уу Vue!, Vue.js жишээ нь HTML элемент дээр суурилагдсан тул id app.

ашиглан програмаа ажиллуулна уу php artisan serve, мөн үүнийг дуртай хөтөч дээрээ нээнэ үү.

Ercole Palmeri

Та бас сонирхож магадгүй ...

• Ларавел дахь үйлчилгээ үзүүлэгчид: тэд юу вэ, Ларавел дахь үйлчилгээ үзүүлэгчдийг хэрхэн ашиглах вэ
• ChatGPT-ийг өөрийн компьютер дээр хэрхэн суулгах талаар
• Microsoft Project дээр Gantt төслийн хэвлэх ажлыг хэрхэн өөрчлөх вэ
• Програм хангамжийн инженерийн хүрээ гэж юу вэ, defiхүрээний тодорхойлолт ба төрлүүд
• Энд анхны дижитал гэрээслэл ирдэг blockchain