Me pehea te whakamahi i a Laravel me Vue.js 3

Ko te Vue.js tetahi o nga anga JavaScript tino whakamahia mo te hanga hononga tukutuku me nga tono wharangi kotahi, me Laravel ka waiho hei taputapu whanaketanga tino kaha.

Mo te whakawhanaketanga o nga taupānga tukutuku, he taputapu e whakamahia nuitia ana ko vuejs, a, i tenei tuhinga ka kite tatou me pehea te whakauru me te whakamahi me Laravel. Ko te anga Vue.js ko defiahiahi anga whakamua na te mea he mea motuhake ki te hanga i nga tirohanga HTML, ka taea e koe te whakauru ngawari ki nga waahanga o etahi atu whare pukapuka me nga kaupapa.

Ko te angitu o Vue.js na te kowhiringa o Laravel ki te whakaaro hei anga o mua, na reira ka puta te putanga 2.0.

Te hanga kaupapa Laravel

Ko te mahi tuatahi ko te hanga kaupapa hou ki Laravel. Mena he mea kei to rorohiko, whakamahia, ka taea ranei e koe te hanga i tetahi mea hou mo tenei akoranga.

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

I muri i te tiimata o te kaupapa, me whakauru koe i te npm nga waranga. Hei mahi i tenei, whakahaerehia te whakahau e whai ake nei i roto i to raarangi kaupapa:

npm install

Ina whakauruhia nga whakawhirinakitanga, whakahaerehia te whakahau e whai ake nei hei hanga i nga rauemi me te whakarite kia pai nga mea katoa:

npm run dev

Ko te whakahau npm run dev he maha nga momo arowhai me te hanga, ina koa Laravel Mix whakahiato te kōnae resources/js/app.js me te kōnae resources/css/app.css i roto i nga kōnae public/js/app.js e public/css/app.css.

Ka mutu mena ka pai nga mea katoa, ka kite koe i tetahi mea penei:

Tāuta Vue.js

I muri i te whakarite i te kaupapa Laravel, ka taea e tatou te haere tonu ki te whakauru i te Vue.js 3. Hei mahi i tenei, whakahaere i te whakahau e whai ake nei i roto i to raarangi kaupapa:

npm install --save-dev vue

Ma tenei ka whakauru i a Vue.js tetahi o nga whakawhirinakitanga whanaketanga. Whai muri i te whakahiato i nga rawa, ka noho noa to konae JavaScript whakaputa, no reira me whakauru koe i a Vue.js hei whakawhirinakitanga whanaketanga.

Kia tika ai te whakaurunga a Vue 3, whakatuwheratia te konae package.json (kei roto i te pakiaka kaupapa) me te rapu "vue" i te waahanga "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"
    }
}

Ka taea e koe te kite, ko te tau putanga e tohu ana kua whakauruhia a Vue.js 3. 

Ko te whakamatautau tuatahi o Vue.js

I roto i to kōnae welcome.blade.php tuhia te waehere e whai ake nei:

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

Ka kite koe kua hangahia e matou he huānga div con id "vue-app“. I roto i te huānga hōtuhi i hangaia e matou he tauira o Vue, ka tukuna e matou ki te kaihanga he ahanoa e taea ai e matou. definish etahi tawhā tono, penei i nga raraunga me nga whanonga, i roto i ta maatau keehi:

• el: Tohutoro ki te huānga div defioti i roto i te html
• rā: huingararaunga

Ina oti te hanga te mea, Vue riro te div con id vue-app me te tiaki i te whakakapi i te kaipupuri waahi {{ text }} me te uara kei roto i te ahanoa raraunga. Ae ra, ka nui ake i te kotahi nga taonga kei roto i tenei ahanoa, ahakoa he momo rereke: he whaimana nga nama, nga hurangi me etahi atu mea kohanga.

I tua atu i tenei whakakapinga, kua whakahohe ano a Vue i tana miihini me te whakautu i te tono, ara, ko nga huringa ki te taonga tuhinga ka puta he whakahou tonu o te huānga e rite ana ki te HTML.

Te whakamatautau tuarua o Vue.js

Ki te haere ki te whakamatautau tuarua, me whakamohio i te taupānga ki te hanga i tetahi waahanga hou. Tuwhera koe resources/app.js (o resources/js/app.js) me te whakahou i ona ihirangi penei:

// resources/app.js

require('./bootstrap');

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

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

I roto i tenei konae kei te hangahia e matou he tauira Vue.js hou, a hei mahi i tenei ka hiahia matou i tetahi waahanga Vue kua kiia e matou he HelloVue.vue. Mo etahi atu korero tirohia nga tuhinga whaimana . 

Waihangatia he kōnae hou resources/components/HelloVue.vue ka tomo i te waehere e whai ake nei:

// resources/components/HelloVue.vue

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

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

Ko te konae i hangaia e matou he waahanga taketake Vue.js ka ta Hello Vue! haere mai header1 i runga i te wharangi. Ka mutu, whakatuwheratia te webpack.mix.js kōnae i roto i te pakiaka kaupapa me te whakahou i ona ihirangi 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', [
        //
    ]);

I roto i tenei kōnae, te tikanga karanga .vue() ka whakahiato tetahi waehere Vue.js ka paihere ki te konae JavaScript whakaputa. Ka whakaae te mahi ki tetahi ahanoa ka taea e koe defimutu te putanga o Vue.js e whakamahia ana e koe. 

I muri i te whakatika i te konae webpack.mix.js me whakahiato e koe te waehere javascript. Hei mahi i tenei, ka whakahaere ano tatou i te whakahau npm run dev.

Ka mutu, ki te whakamatau i a Vue, whakatuwheratia te konae resources/views/welcome.blade.php ka tomo i te waehere e whai ake nei:

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

Ko te waehere, me te waahanga i hangaia i mua, ka puta he karere ataata Kia ora Vue!, na te mea ko te tauira Vue.js kei runga i te huānga HTML me te id app.

Whakahaerehia to tono ma te whakamahi php artisan serve, ka whakatuwhera i roto i to kaitirotiro tino pai.

Ercole Palmeri

Akene he hiahia koe ki ...

• Nga Kaituku Ratonga i Laravel: he aha ratou me pehea te whakamahi i nga Kaituku Ratonga i Laravel
• Me pehea te whakauru i te ChatGPT ki to rorohiko
• Me pehea te whakarite i te tuhinga kaupapa Gantt ki te Kaupapa Microsoft
• He aha te anga i roto i te Hangarau Pūmanawa, defiwhakamāramatanga me ngā momo anga
• Ka tae mai te hiahia mamati tuatahi me blockchain