Articles

Mashandisiro eLaravel neVue.js 3

Vue.js ndeimwe yeanonyanya kushandiswa JavaScript mafuremu ekugadzira mawebhusaiti uye mapeji maapplication, pamwe neLaravel inova chishandiso chakasimba chekusimudzira.

Nekuvandudza kwewebhu maapplication, chishandiso chinoshandiswa zvakanyanya ndeye vuejs, uye mune ino chinyorwa tichaona nzira yekuisa nekuishandisa neLaravel. Iyo Vue.js framework yaive definite gadziriro inofambira mberi nekuti inyanzvi mukugadzira HTML maonero, uye inobvumidza iwe kuti ubatanidze nyore nezvikamu zvemamwe maraibhurari nemapurojekiti.

Kubudirira kweVue.js kunokonzerwawo nesarudzo ye Laravel kuikurudzira senzira yekumberi, zvichizotungamira mukuburitswa kwevhezheni 2.0.

Tafura yezviri mukati

Laravel kugadzirwa kweprojekiti

Nhanho yekutanga ndeye, hongu, kugadzira chirongwa chitsva muLaravel. Kana iwe uine imwe pakombuta yako, ishandise kana iwe unogona kugadzira imwe nyowani yeiyi tutorial.

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

Mushure mekunge purojekiti yatanga, iwe uchafanirwa kuisa iyo npm kupindwa muropa. Kuti uite izvi, mhanyisa unotevera kuraira mukati meiyo dhairekitori reprojekiti:

npm install

Kana zvinotsamira zvaiswa, mhanyisa unotevera kuraira kuvaka zviwanikwa uye ita shuwa kuti zvese zvinoshanda chaizvo:

npm run dev

Murairo npm run dev inoita macheki akasiyana siyana nekuvaka, kunyanya Laravel Mix gadzira faira resources/js/app.js uye faira resources/css/app.css mumafaira public/js/app.js e public/css/app.css.

Kana wapedza kana zvese zvichishanda zvakanaka, uchaona chimwe chinhu chakadai:

Kuisa Vue.js

Mushure mekugadzirira chirongwa cheLaravel, tinogona kuenderera mberi nekuisa Vue.js 3. Kuti uite izvi, shandisa murairo unotevera mubhuku reprojekti yako:

npm install --save-dev vue

Izvi zvichaisa Vue.js seimwe yezvinotsamira pabudiriro. Mushure mekunyora midziyo, yako yekugadzira JavaScript faira inove yega, saka unongoda kuisa Vue.js sechinhu chinotsamira pabudiriro.

Kuti uve nechokwadi chekuti Vue 3 yakaiswa nemazvo, vhura iyo faira package.json (iripo mumudzi weprojekiti) uye tsvaga "vue" muchikamu "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"
    }
}

Sezvauri kuona, nhamba yevhezheni inoratidza kuti Vue.js 3 yakaiswa.

Kutanga kuedza kweVue.js

Mune yako welcome.blade.php faira isa kodhi inotevera:

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

Sezvauri kuona isu takagadzira chinhu div game id "vue-app“. Mukati meiyo script element takagadzira muenzaniso weVue, kwatinopfuudza kumugadziri chinhu chinotitendera definish mamwe ma paramita ekushandisa, akadai sedata uye maitiro, mune yedu kesi:

el: Reference kune chinhu div defiyapera mu html
date: dataset

Pakangogadzirwa chinhu, Vue anowana the div game id vue-app uye inotarisira kutsiva chibatiso {{ text }} nehuwandu huri mukati mechinhu che data. Ehe, chinhu ichi chinogona kuve neinopfuura chivakwa chimwe, kunyangwe chemhando dzakasiyana: nhamba, arrays uye zvimwe zvinhu zvakatenderedzwa zvinoshanda.

Kunze kwekutsiva uku, Vue yakamisawo injini yayo uye ikaita kuti application iite, kureva kuti chero shanduko kune zvinyorwa zvemavara zvinokonzeresa iko kugadziridzwa kwechinhu chinoenderana muHTML.

Muedzo wechipiri weVue.js

Kuti uenderere kumuyedzo wechipiri, iwe unofanirwa kutanga waisa iyo app kuti igadzire chinhu chitsva. Iwe vhura resources/app.js (o resources/js/app.js) uye gadziridza zvirimo sezvinotevera:

// resources/app.js

require('./bootstrap');

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

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

Mufaira iri tiri kugadzira chiitiko chitsva cheVue.js, uye kuti tiite izvi tinoda chikamu cheVue chatakadaidza kuti HelloVue.vue. Kuti uwane mamwe mashoko bvunza magwaro epamutemo .

Gadzira faira idzva resources/components/HelloVue.vue uye isa kodhi inotevera:

// resources/components/HelloVue.vue

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

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

Iyo faira yatichangobva kugadzira chinhu chakakosha Vue.js chinodhinda Hello Vue! uya header1 papeji. Pakupedzisira, vhura iyo webpack.mix.js faira mumudzi weprojekiti uye gadziridza zvirimo sezvizvi:

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

Mune iyi faira, iyo nzira yekufona .vue() ichaunganidza chero Vue.js kodhi uye kuiunganidza mukugadzira JavaScript faira. Basa rinogamuchira chinhu paunogona defindish shanduro yeVue.js yauri kushandisa.

Mushure mekugadzirisa faira webpack.mix.js iwe unofanirwa kuunganidza iyo javascript kodhi. Kuti tiite izvi, tinomhanya murairo zvakare npm run dev.

Pakupedzisira, kuedza Vue kushanda, vhura faira resources/views/welcome.blade.php uye isa kodhi inotevera:

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

Iyo kodhi, pamwe chete neyakagadzirwa chikamu, inoburitsa vhidhiyo meseji Mhoro Vue!, nekuda kwemuenzaniso weVue.js urikuiswa pane HTML element ne id app.

Shandisa application yako uchishandisa php artisan serve, woivhura mubrowser yako yaunofarira.

Ercole Palmeri

Iwe unogona zvakare kufarira ...