ፅሁፎች

Laravelን በVue.js 3 እንዴት መጠቀም እንደሚቻል

Vue.js የድር በይነገጽ እና ነጠላ ገፅ አፕሊኬሽኖችን ለመፍጠር በጣም ጥቅም ላይ ከሚውሉት የጃቫ ስክሪፕት ፍሬሞች አንዱ ሲሆን ከላራቬል ጋር አብሮ በጣም ኃይለኛ የእድገት መሳሪያ ይሆናል።

ለድር መተግበሪያዎች ልማት በስፋት ጥቅም ላይ የዋለው መሳሪያ vuejs ነው, እና በዚህ ጽሑፍ ውስጥ ከላራቬል ጋር እንዴት እንደሚጫኑ እና እንደሚጠቀሙበት እንመለከታለን. የVue.js ማዕቀፍ ነበር። definito ተራማጅ ማዕቀፍ ምክንያቱም የኤችቲኤምኤል እይታዎችን በመፍጠር ረገድ ልዩ ነው, እና ከሌሎች ቤተ-መጻህፍት እና ፕሮጀክቶች አካላት ጋር በቀላሉ እንዲዋሃዱ ይፈቅድልዎታል.

የ Vue.js ስኬትም በምርጫው ምክንያት ነው Laravel እንደ የፊት ለፊት ማእቀፍ ለመጠቆም, ስለዚህ ወደ ስሪት 2.0 እንዲለቀቅ ያደርጋል.

ዝርዝር ሁኔታ

የላራቬል ፕሮጀክት መፍጠር

የመጀመሪያው እርምጃ እርግጥ ነው, በላራቬል ውስጥ አዲስ ፕሮጀክት መፍጠር ነው. በኮምፒዩተርዎ ላይ ካለዎት ይጠቀሙበት ወይም ለዚህ አጋዥ ስልጠና ብቻ አዲስ መፍጠር ይችላሉ።

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 በመጫን ላይ

የላራቬል ፕሮጄክትን ካዘጋጀን በኋላ Vue.js 3 ን መጫን መቀጠል እንችላለን። ይህንን ለማድረግ የሚከተለውን ትዕዛዝ በፕሮጀክት ማውጫዎ ውስጥ ያሂዱ፡-

npm install --save-dev vue

ይህ Vue.jsን እንደ የልማት ጥገኞች ይጭናል። ንብረቶቹን ካጠናቀረ በኋላ፣የእርስዎ ምርት ጃቫስክሪፕት ፋይል ራሱን የቻለ ይሆናል፣ስለዚህ 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 defiበኤችቲኤምኤል ውስጥ ተጠናቅቋል
ቀን: የውሂብ ስብስብ

እቃው እንደተፈጠረ, Vue ን ያገኛል div ጋር id vue-app እና ቦታ ያዥውን ለመተካት ይንከባከባል {{ text }} በውሂቡ ውስጥ ካለው እሴት ጋር። እርግጥ ነው፣ ይህ ነገር ከአንድ በላይ ንብረቶችን ሊይዝ ይችላል፣ የተለያዩ ዓይነቶችም ቢሆን፡ ቁጥሮች፣ ድርድሮች እና ሌሎች ጎጆዎች ልክ ናቸው

ከዚህ ምትክ በተጨማሪ Vue ሞተሩን በማግበር አፕሊኬሽኑን ምላሽ ሰጭ አድርጎታል፣ ማለትም በጽሁፍ ንብረቱ ላይ የሚደረጉ ማናቸውም ለውጦች በኤችቲኤምኤል ውስጥ ያለውን ተዛማጅ ንጥረ ነገር ፈጣን ማሻሻያ ያደርጋል።

የ 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 ኮድ ያጠናቅራል እና ወደ ምርት ጃቫ ስክሪፕት ፋይል ያጠቃልለዋል። ተግባሩ የምትችለውን ነገር ይቀበላል defiእየተጠቀሙበት ያለውን የVue.js ስሪት nish።

ፋይሉን ካስተካከሉ በኋላ webpack.mix.js የጃቫስክሪፕት ኮድ ማጠናቀር ያስፈልግዎታል። ይህንን ለማድረግ ትዕዛዙን እንደገና እንሰራለን 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 ምሳሌ በኤችቲኤምኤል ኤለመንት ላይ ስለተጫነ id app.

በመጠቀም መተግበሪያዎን ያሂዱ php artisan serve, እና በሚወዱት አሳሽ ውስጥ ይክፈቱት.

Ercole Palmeri

እንዲሁም ፍላጎት ሊኖርዎት ይችላል ...