Cov khoom

Yuav siv Laravel li cas nrog Vue.js 3

Vue.js yog ib qho ntawm feem ntau siv JavaScript framevorks rau kev tsim web interfaces thiab ib nplooj ntawv daim ntawv thov, ua ke nrog Laravel nws dhau los ua ib qho kev txhim kho muaj zog heev.

Rau kev txhim kho lub vev xaib apps, cov cuab yeej siv dav siv yog vuejs, thiab hauv kab lus no peb yuav pom yuav ua li cas rau nruab thiab siv nws nrog Laravel. Vue.js lub moj khaum yog definoj nce qib vim nws yog tshwj xeeb hauv kev tsim cov kev pom HTML, thiab tso cai rau koj yooj yim koom nrog cov khoom ntawm lwm cov tsev qiv ntawv thiab cov haujlwm.

Kev vam meej ntawm Vue.js kuj yog vim kev xaiv ntawm laravel los qhia nws raws li lub hauv paus ntsiab lus, yog li ua rau kev tso tawm ntawm version 2.0.

Cov ntsiab lus

Laravel project creation

Thawj kauj ruam yog, ntawm chav kawm, los tsim ib qhov project tshiab hauv Laravel. Yog tias koj muaj ib qho hauv koj lub computer, siv nws lossis koj tuaj yeem tsim ib qho tshiab rau qhov kev qhia no.

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

Tom qab qhov project tau pib, koj yuav tsum tau nruab lub npm kev quav yeeb quav tshuaj. Txhawm rau ua qhov no, khiav cov lus txib hauv qab no hauv koj qhov project directory:

npm install

Thaum cov dependencies raug ntsia, khiav cov lus txib hauv qab no los tsim cov peev txheej thiab xyuas kom txhua yam ua haujlwm tiag tiag:

npm run dev

Cov lus txib npm run dev ua ntau yam kev kuaj xyuas thiab tsim, tshwj xeeb Laravel Mix compile cov ntaub ntawv resources/js/app.js thiab cov ntaub ntawv resources/css/app.css hauv cov ntaub ntawv public/js/app.js e public/css/app.css.

Thaum ua tiav yog tias txhua yam ua haujlwm zoo, koj yuav pom qee yam zoo li no:

Txhim kho Vue.js

Tom qab npaj Laravel qhov project, peb tuaj yeem mus rau nruab Vue.js 3. Ua li no, khiav cov lus txib hauv qab no hauv koj qhov project directory:

npm install --save-dev vue

Qhov no yuav nruab Vue.js ua ib qho ntawm kev txhim kho kev vam meej. Tom qab sau cov khoom muaj nqis, koj cov ntaub ntawv JavaScript ntau lawm yuav muaj tus kheej, yog li koj tsuas yog xav tau nruab Vue.js raws li kev txhim kho.

Kom paub tseeb tias Vue 3 raug teeb tsa kom raug, qhib cov ntaub ntawv package.json (tam sim no hauv qhov project hauv paus) thiab nrhiav rau "vue" hauv ntu "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"
    }
}

Raws li koj tuaj yeem pom, tus lej version qhia tias Vue.js 3 tau raug teeb tsa.

Thawj zaug ntawm Vue.js

Hauv koj cov ntaub ntawv welcome.blade.php muab cov cai hauv qab no:

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

Raws li koj tuaj yeem pom peb tau tsim ib lub caij div con id "vue-app". Hauv cov ntawv sau peb tau tsim ib qho piv txwv ntawm Vue, qhov twg peb dhau mus rau tus tsim cov khoom uas tso cai rau peb mus definish qee qhov kev siv tsis tau, xws li cov ntaub ntawv thiab kev coj cwj pwm, hauv peb rooj plaub:

el: Siv rau lub caij div defiua tiav hauv html
date: dataset

Thaum cov khoom raug tsim, Vue tau cov div con id vue-app thiab saib xyuas qhov hloov qhov chaw {{ text }} nrog tus nqi muaj nyob rau hauv cov ntaub ntawv kwv. Tau kawg, cov khoom no tuaj yeem muaj ntau dua ib qho cuab yeej, txawm tias muaj ntau hom: tus lej, arrays thiab lwm yam khoom nested siv tau.

Dhau li ntawm qhov kev hloov pauv no, Vue kuj tau qhib nws lub cav thiab ua rau daim ntawv thov teb, piv txwv li kev hloov pauv rau cov ntawv nyeem yuav ua rau muaj qhov hloov tshiab tam sim ntawm cov khoom sib xws hauv HTML.

II test of Vue.js

Txhawm rau txuas mus rau qhov thib ob mus sib hais, koj yuav tsum xub ua sai sai rau lub app los tsim cov khoom tshiab. Koj qhib resources/app.js (o resources/js/app.js) thiab hloov kho nws cov ntsiab lus raws li hauv qab no:

// resources/app.js

require('./bootstrap');

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

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

Hauv cov ntaub ntawv no peb tab tom tsim Vue.js piv txwv tshiab, thiab ua qhov no peb xav tau Vue tivthaiv uas peb tau hu ua HelloVue.vue. Yog xav paub ntxiv sab laj cov ntaub ntawv raug cai .

Tsim cov ntaub ntawv tshiab resources/components/HelloVue.vue thiab sau tus lej hauv qab no:

// resources/components/HelloVue.vue

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

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

Cov ntaub ntawv peb nyuam qhuav tsim yog ib qho yooj yim Vue.js tivthaiv uas luam tawm Hello Vue! tuaj header1 ntawm nplooj ntawv. Thaum kawg, qhib lub webpack.mix.js file hauv qhov project hauv paus thiab hloov kho nws cov ntsiab lus raws li hauv qab no:

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

Hauv cov ntaub ntawv no, txoj kev hu .vue() yuav sau ib qho Vue.js code thiab ntim rau hauv cov ntaub ntawv JavaScript ntau lawm. Txoj haujlwm lees txais ib qho khoom uas koj tuaj yeem ua tau definish lub version ntawm Vue.js koj siv.

Tom qab kho cov ntaub ntawv webpack.mix.js koj yuav tsum tau sau cov javascript code. Ua li no, peb khiav cov lus txib dua npm run dev.

Thaum kawg, sim Vue ua haujlwm, qhib cov ntaub ntawv resources/views/welcome.blade.php thiab sau tus lej hauv qab no:

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

Cov cai, ua ke nrog cov khoom tsim yav dhau los, yuav tsim cov lus video Nyob zoo Vue!, vim yog Vue.js piv txwv tau mounted ntawm ib lub ntsiab HTML nrog id app.

Khiav koj daim ntawv thov siv php artisan serve, thiab qhib nws hauv koj qhov browser nyiam.

Ercole Palmeri

Koj kuj tseem yuav txaus siab rau ...