Mokhoa oa ho sebelisa Laravel ka Vue.js 3

Vue.js ke e 'ngoe ea liforomo tsa JavaScript tse sebelisoang haholo bakeng sa ho theha marang-rang le lits'ebetso tsa leqephe le le leng, mmoho le Laravel e fetoha sesebelisoa se matla haholo sa nts'etsopele.

Bakeng sa nts'etsopele ea lisebelisoa tsa marang-rang, sesebelisoa se sebelisoang haholo ke vuejs, 'me sehloohong sena re tla bona mokhoa oa ho e kenya le ho e sebelisa ka Laravel. Moralo oa Vue.js o ne o defiNito moralo o tsoelang pele hobane e khethehile ho theheng maikutlo a HTML, 'me e u lumella ho kopanya habonolo le likarolo tsa lilaebrari tse ling le merero.

Katleho ea Vue.js e boetse e bakoa ke khetho ea Laravella ho e fana ka maikutlo e le moralo o ka pele, ka hona e lebisang tokollong ea mofuta oa 2.0.

Tlhahiso ea morero oa Laravel

Mohato oa pele ke ho theha projeke e ncha ho Laravel. Haeba u na le e khomphuteng ea hau, e sebelise kapa u ka iketsetsa e ncha bakeng sa thupelo ena feela.

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

Ka mor'a hore morero o qale, o tla hloka ho kenya npm temallo. Ho etsa sena, tsamaisa taelo e latelang ka har'a bukana ea projeke ea hau:

npm install

Hang ha litšepe li kentsoe, tsamaisa taelo e latelang ho haha ​​​​lisebelisoa le ho etsa bonnete ba hore ntho e 'ngoe le e' ngoe e sebetsa hantle:

npm run dev

Taelo npm run dev e etsa licheke tse fapaneng le ho aha, haholoholo Laravel Mix bokella faele resources/js/app.js le faele resources/css/app.css ka lifaele public/js/app.js e public/css/app.css.

Ha u qetile, haeba tsohle li sebetsa hantle, u tla bona ntho e kang ena:

E kenya Vue.js

Ka mor'a ho lokisetsa morero oa Laravel, re ka tsoela pele ho kenya Vue.js 3. Ho etsa sena, tsamaisa taelo e latelang bukeng ea morero oa hau:

npm install --save-dev vue

Sena se tla kenya Vue.js e le e 'ngoe ea litšepiso tsa nts'etsopele. Kamora ho bokella thepa, faele ea hau ea tlhahiso ea JavaScript e tla ikemela, kahoo o hloka feela ho kenya Vue.js joalo ka ts'epo ea nts'etsopele.

Ho etsa bonnete ba hore Vue 3 e kentsoe ka nepo, bula faele package.json (pres in project root) ebe u batla "vue" karolong eo "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"
    }
}

Joalo ka ha u bona, nomoro ea mofuta e bontša hore Vue.js 3 e kentsoe. 

Leka la pele la Vue.js

Ho file ea hau ea welcome.blade.php kenya khoutu e latelang:

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

Joalokaha u ka bona, re thehile element div , con id "vue-app“. Ka hare ho karolo ea script re thehile mohlala oa Vue, moo re fetisetsang ho moetsi ntho e re lumellang ho defitlosa likarolo tse ling tsa ts'ebeliso, joalo ka data le boits'oaro, molemong oa rona:

• el: Ho buuoa ka elemente div defie felile ka html
• letsatsi: dataset

Hang ha ntho e bōptjoa, Vue fumana the div , con id vue-app mme e hlokomela ho nkela seswara sebaka sebaka {{ text }} ka boleng bo teng ka har'a ntho ea data. Ehlile, ntho ena e ka ba le thepa e fetang e le 'ngoe, esita le ea mefuta e fapaneng: lipalo, lihlopha le lintho tse ling tse hahelletsoeng li nepahetse.

Ntle le phetoho ena, Vue e boetse e kentse enjine ea eona 'me ea etsa hore sesebelisoa se arabele, ke hore, phetoho efe kapa efe ea thepa ea mongolo e tla etsa hore ho ntlafatsoe hanghang ntho e tsamaisanang le eona ho HTML.

Teko ea bobeli ea Vue.js

Ho fetela tekong ea bobeli, u tla tlameha ho qala ka ho kenya app ho etsa karolo e ncha. Ua bula resources/app.js (o resources/js/app.js) le ho ntlafatsa litaba tsa eona ka tsela e latelang:

// resources/app.js

require('./bootstrap');

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

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

Faeleng ena re etsa mohlala o mocha oa Vue.js, 'me ho etsa sena re hloka karolo ea Vue eo re e bitsitseng HelloVue.vue. Ho fumana lintlha tse ling sheba litokomane tsa molao . 

Theha faele e ncha resources/components/HelloVue.vue ebe o kenya khoutu e latelang:

// resources/components/HelloVue.vue

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

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

Faele eo re sa tsoa e etsa ke karolo ea mantlha ea Vue.js e hatisang Hello Vue! tla header1 leqepheng. Qetellong, bula webpack.mix.js faele ka har'a motso oa projeke 'me u ntlafatse litaba tsa eona ka tsela e latelang:

// 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', [
        //
    ]);

Ka faele ena, mokhoa oa ho letsetsa .vue() e tla bokella khoutu efe kapa efe ea Vue.js ebe e e kopanya ho faele ea tlhahiso ea JavaScript. Tshebetso e amohela ntho moo o ka khonang defitlosa mofuta oa Vue.js oo u o sebelisang. 

Ka mor'a ho hlophisa faele webpack.mix.js o hloka ho bokella khoutu ea javascript. Ho etsa sena, re tsamaisa taelo hape npm run dev.

Qetellong, ho leka Vue ka ts'ebetso, bula faele resources/views/welcome.blade.php ebe o kenya khoutu e latelang:

<!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>

Khoutu, hammoho le karolo e entsoeng pele, e tla hlahisa molaetsa oa video Hello Vue!, ka lebaka la mohlala oa Vue.js o kentsoeng karolong ea HTML ka id app.

Kenya sesebelisoa sa hau u sebelisa php artisan serve, ebe o e bula ho sebatli seo u se ratang haholo.

Ercole Palmeri

U kanna oa khahloa ke ...

• Bafani ba Litšebeletso ho Laravel: seo ba leng sona le mokhoa oa ho sebelisa Bafani ba Litšebeletso ho Laravel
• Mokhoa oa ho kenya ChatGPT sebakeng sa heno khomphuteng ea hau
• Mokhoa oa ho etsa khatiso ea projeke ea Gantt ho Microsoft Project
• Moralo ke eng ho Boenjiniere ba Software, defitlhaloso le mefuta ea meralo
• Mona ho tla thato ea pele ea dijithale ka blockchain