Pehea e hoʻohana ai iā Laravel me Vue.js 3

ʻO Vue.js kekahi o nā framevorks JavaScript i hoʻohana nui ʻia no ka hana ʻana i nā pilina pūnaewele a me nā noi ʻaoʻao hoʻokahi, me Laravel e lilo ia i mea hana hoʻomohala ikaika loa.

No ka hoʻomohala ʻana i nā polokalamu pūnaewele, ʻo vuejs kahi mea hana i hoʻohana nui ʻia, a ma kēia ʻatikala e ʻike mākou pehea e hoʻokomo ai a hoʻohana me Laravel. ʻO ka hoʻolālā Vue.js defikāna papa hana holomua no ka mea he loea i ka hana ʻana i nā manaʻo HTML, a hiki iā ʻoe ke hoʻohui maʻalahi me nā ʻāpana o nā hale waihona puke a me nā papahana ʻē aʻe.

ʻO ka holomua o Vue.js ma muli o ke koho ʻana o ʻO Laravel e hōʻike iā ia ma ke ʻano he papa hana mua, no laila ke alakaʻi nei i ka hoʻokuʻu ʻana o ka mana 2.0.

Hana ʻia ʻo Laravel

ʻO ka hana mua, ʻoiaʻiʻo, e hana i kahi papahana hou ma Laravel. Inā loaʻa iā ʻoe kekahi ma kāu kamepiula, e hoʻohana iā ia a i ʻole hiki iā ʻoe ke hana i kahi hou no kēia kumu aʻo.

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

Ma hope o ka hoʻomaka ʻana o ka papahana, pono ʻoe e hoʻokomo i nā les npm nā mea hoʻohui. No ka hana ʻana i kēia, e holo i kēia kauoha i loko o kāu papa kuhikuhi papahana:

npm install

Ke hoʻokomo ʻia nā mea hilinaʻi, e holo i kēia kauoha e kūkulu i nā kumuwaiwai a hōʻoia i ka hana maoli ʻana o nā mea āpau:

npm run dev

ʻO ke kauoha npm run dev hana i nā ʻano loiloi a me ke kūkulu ʻana, ʻoi aku Laravel Mix hōʻuluʻulu i ka faila resources/js/app.js a me ka waihona resources/css/app.css i nā faila public/js/app.js e public/css/app.css.

Ke pau inā holo pono nā mea a pau, e ʻike ʻoe i kahi mea penei:

Ke hoʻokomo nei iā Vue.js

Ma hope o ka hoʻomākaukau ʻana i ka papahana Laravel, hiki iā mākou ke hoʻomaka e hoʻokomo iā Vue.js 3. No ka hana ʻana i kēia, e holo i kēia kauoha i kāu papa kuhikuhi papahana:

npm install --save-dev vue

E hoʻokomo kēia iā Vue.js ma ke ʻano he mea hilinaʻi hoʻomohala. Ma hope o ka hōʻuluʻulu ʻana i nā waiwai, e paʻa pono kāu faila JavaScript, no laila pono ʻoe e hoʻokomo iā Vue.js ma ke ʻano he hilinaʻi hoʻomohala.

No ka hōʻoia ʻana ua hoʻokomo pono ʻia ʻo Vue 3, wehe i ka faila package.json (i kēia manawa ma ke kumu papahana) a ʻimi no "vue" ma ka ʻāpana "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"
    }
}

E like me kāu e ʻike ai, hōʻike ka helu helu ua hoʻokomo ʻia ʻo Vue.js 3. 

Hoao mua o Vue.js

Ma kāu waihona welcome.blade.php e kau i kēia code:

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

E like me kāu e ʻike ai ua hana mākou i kahi mea div Me id "vue-app“. I loko o ka mea kākau ua hana mākou i kahi laʻana o Vue, kahi mākou e hele ai i ka mea hana i kahi mea e hiki ai iā mākou ke hana. defie hoʻopau i kekahi mau ʻāpana noi, e like me ka ʻikepili a me nā ʻano, i kā mākou hihia:

• el: Kuhikuhi i ka mea div defipau i ka html
• lā: waihona

Ke hana ʻia ka mea, Vue loaa ka div Me id vue-app a mālama i ka hoʻololi ʻana i ka mea waiho wahi {{ text }} me ka waiwai i loko o ka mea ʻikepili. ʻOiaʻiʻo, hiki i kēia mea ke loaʻa i nā waiwai ʻoi aku ma mua o hoʻokahi, ʻo nā ʻano ʻano like ʻole: kūpono nā helu, arrays a me nā mea pūnana ʻē aʻe.

Ma waho aʻe o kēia hoʻololi, ua hoʻāla ʻia ʻo Vue i kāna ʻenekini a hoʻokō i ka noi, ʻo ia hoʻi, ʻo ka hoʻololi ʻana i ka waiwai kikokikona e hoʻololi koke i ka mea pili i ka HTML.

Ka lua o ka hoao ana o Vue.js

No ka hoʻomaka ʻana i ka hoʻāʻo ʻelua, pono ʻoe e hoʻomaka koke i ka app e hana i kahi mea hou. Wehe ʻoe resources/app.js (o resources/js/app.js) a hōʻano hou i kāna ʻike penei:

// resources/app.js

require('./bootstrap');

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

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

I loko o kēia waihona mākou e hana nei i kahi Vue.js hou, a no ka hana ʻana i kēia pono mākou i kahi ʻāpana Vue a mākou i kapa ai he HelloVue.vue. No ka 'ike hou aku e ninau i na palapala oihana . 

E hana i kahi faila hou resources/components/HelloVue.vue a hookomo i keia code:

// resources/components/HelloVue.vue

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

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

ʻO ka faila a mākou i hana ai he ʻāpana Vue.js maʻamau e paʻi Hello Vue! hele mai header1 ma ka ʻaoʻao. ʻO ka hope, wehe i ka webpack.mix.js faila i loko o ke kumu o ka papahana a hoʻohou i kāna mau ʻike penei:

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

Ma keia waihona, ke kahea ala .vue() e hōʻuluʻulu i kekahi code Vue.js a pūʻolo i loko o ka waihona JavaScript hana. Hāʻawi ka hana i kahi mea i hiki iā ʻoe defihoʻopau i ka mana o Vue.js āu e hoʻohana nei. 

Ma hope o ka hoʻoponopono ʻana i ka faila webpack.mix.js pono ʻoe e hoʻohui i ka code javascript. No ka hana ʻana i kēia, holo hou mākou i ke kauoha npm run dev.

ʻO ka hope, e hoʻāʻo iā Vue me ka hana, wehe i ka faila resources/views/welcome.blade.php a hookomo i keia code:

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

ʻO ke code, me ka mea i hana mua ʻia, e hoʻopuka i kahi memo wikiō Aloha Vue!, ma muli o ka Vue.js laʻana i kau ʻia ma kahi mea HTML me id app.

E holo i kāu polokalamu me ka hoʻohana php artisan serve, a wehe ia ma kāu polokalamu kele punahele.

Ercole Palmeri

E hoihoi paha ʻoe i ...

• Nā mea hoʻolako lawelawe ma Laravel: he aha lākou a pehea e hoʻohana ai i nā mea hoʻolako lawelawe ma Laravel
• Pehea e hoʻokomo ai iā ChatGPT ma kāu kamepiula
• Pehea e hoʻopilikino ai i ka paʻi papahana Gantt ma Microsoft Project
• He aha ka Framework i ka Software Engineering, defiwehewehe a me nā ʻano o nā ʻano
• Eia mai ka palapala kikohoʻe mua me blockchain