ਲੇਖ

Vue.js 3 ਨਾਲ Laravel ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ

Vue.js ਵੈੱਬ ਇੰਟਰਫੇਸ ਅਤੇ ਸਿੰਗਲ ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਲਈ ਸਭ ਤੋਂ ਵੱਧ ਵਰਤੇ ਜਾਣ ਵਾਲੇ JavaScript ਫਰੇਮਵਰਕਸ ਵਿੱਚੋਂ ਇੱਕ ਹੈ, Laravel ਦੇ ਨਾਲ ਇਹ ਇੱਕ ਬਹੁਤ ਸ਼ਕਤੀਸ਼ਾਲੀ ਵਿਕਾਸ ਸਾਧਨ ਬਣ ਜਾਂਦਾ ਹੈ।

ਵੈਬ ਐਪਸ ਦੇ ਵਿਕਾਸ ਲਈ, ਇੱਕ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਟੂਲ vuejs ਹੈ, ਅਤੇ ਇਸ ਲੇਖ ਵਿੱਚ ਅਸੀਂ ਦੇਖਾਂਗੇ ਕਿ ਇਸਨੂੰ ਲਾਰਵੇਲ ਨਾਲ ਕਿਵੇਂ ਇੰਸਟਾਲ ਕਰਨਾ ਅਤੇ ਵਰਤਣਾ ਹੈ। Vue.js ਫਰੇਮਵਰਕ ਸੀ defiਨੀਟੋ ਪ੍ਰਗਤੀਸ਼ੀਲ ਫਰੇਮਵਰਕ ਕਿਉਂਕਿ ਇਹ HTML ਦ੍ਰਿਸ਼ਾਂ ਨੂੰ ਬਣਾਉਣ ਵਿੱਚ ਮਾਹਰ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਹੋਰ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਪ੍ਰੋਜੈਕਟਾਂ ਦੇ ਭਾਗਾਂ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

Vue.js ਦੀ ਸਫਲਤਾ ਦੀ ਚੋਣ ਦੇ ਕਾਰਨ ਵੀ ਹੈ Laravel ਇਸ ਨੂੰ ਇੱਕ ਫਰੰਟਐਂਡ ਫਰੇਮਵਰਕ ਵਜੋਂ ਸੁਝਾਅ ਦੇਣ ਲਈ, ਇਸ ਤਰ੍ਹਾਂ ਸੰਸਕਰਣ 2.0 ਦੇ ਰੀਲੀਜ਼ ਵੱਲ ਅਗਵਾਈ ਕਰਦਾ ਹੈ।

ਵਿਸ਼ਾ - ਸੂਚੀ

ਲਾਰਵੇਲ ਪ੍ਰੋਜੈਕਟ ਦੀ ਰਚਨਾ

ਪਹਿਲਾ ਕਦਮ, ਬੇਸ਼ਕ, ਲਾਰਵੇਲ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ ਇੱਕ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਵਰਤੋ ਜਾਂ ਤੁਸੀਂ ਇਸ ਟਿਊਟੋਰਿਅਲ ਲਈ ਇੱਕ ਨਵਾਂ ਬਣਾ ਸਕਦੇ ਹੋ।

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

ਪ੍ਰੋਜੈਕਟ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ npm ਨਸ਼ੇ ਅਜਿਹਾ ਕਰਨ ਲਈ, ਆਪਣੀ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ:

npm install

ਇੱਕ ਵਾਰ ਨਿਰਭਰਤਾ ਸਥਾਪਤ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਸਰੋਤ ਬਣਾਉਣ ਲਈ ਹੇਠ ਲਿਖੀ ਕਮਾਂਡ ਚਲਾਓ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਭ ਕੁਝ ਅਸਲ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ:

npm run dev

ਹੁਕਮ npm run dev ਖਾਸ ਤੌਰ 'ਤੇ, ਕਈ ਤਰ੍ਹਾਂ ਦੀਆਂ ਜਾਂਚਾਂ ਅਤੇ ਨਿਰਮਾਣ ਕਰਦਾ ਹੈ Laravel Mix ਫਾਇਲ ਨੂੰ ਕੰਪਾਇਲ ਕਰੋ resources/js/app.js ਅਤੇ ਫਾਈਲ resources/css/app.css ਫਾਈਲਾਂ ਵਿੱਚ public/js/app.js e public/css/app.css.

ਜਦੋਂ ਪੂਰਾ ਹੋ ਜਾਂਦਾ ਹੈ ਜੇ ਸਭ ਕੁਝ ਠੀਕ ਕੰਮ ਕਰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖੋਗੇ:

Vue.js ਇੰਸਟਾਲ ਕਰਨਾ

Laravel ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਤਿਆਰ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਅਸੀਂ Vue.js 3 ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ ਅੱਗੇ ਵਧ ਸਕਦੇ ਹਾਂ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਆਪਣੀ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਹੇਠ ਲਿਖੀ ਕਮਾਂਡ ਚਲਾਓ:

npm install --save-dev vue

ਇਹ Vue.js ਨੂੰ ਵਿਕਾਸ ਨਿਰਭਰਤਾਵਾਂ ਵਿੱਚੋਂ ਇੱਕ ਵਜੋਂ ਸਥਾਪਿਤ ਕਰੇਗਾ। ਸੰਪਤੀਆਂ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਡੀ ਪ੍ਰੋਡਕਸ਼ਨ JavaScript ਫਾਈਲ ਸਵੈ-ਨਿਰਭਰ ਹੋਵੇਗੀ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਵਿਕਾਸ ਨਿਰਭਰਤਾ ਵਜੋਂ Vue.js ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ Vue 3 ਸਹੀ ਢੰਗ ਨਾਲ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਸੀ, ਫਾਈਲ ਖੋਲ੍ਹੋ package.json (ਪ੍ਰੋਜੈਕਟ ਰੂਟ ਵਿੱਚ ਮੌਜੂਦ) ਅਤੇ ਖੋਜ ਕਰੋ "vue" ਭਾਗ ਵਿੱਚ "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"
    }
}

ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ, ਸੰਸਕਰਣ ਨੰਬਰ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ Vue.js 3 ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਹੈ।

Vue.js ਦੀ ਪਹਿਲੀ ਕੋਸ਼ਿਸ਼

ਆਪਣੀ welcome.blade.php ਫਾਈਲ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤਾ ਕੋਡ ਪਾਓ:

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

ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ ਕਿ ਅਸੀਂ ਇੱਕ ਤੱਤ ਬਣਾਇਆ ਹੈ div ਨਾਲ id "vue-app". ਸਕ੍ਰਿਪਟ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ ਅਸੀਂ Vue ਦੀ ਇੱਕ ਉਦਾਹਰਣ ਬਣਾਈ ਹੈ, ਜਿੱਥੇ ਅਸੀਂ ਕੰਸਟਰਕਟਰ ਨੂੰ ਇੱਕ ਵਸਤੂ ਦਿੰਦੇ ਹਾਂ ਜੋ ਸਾਨੂੰ defiਸਾਡੇ ਕੇਸ ਵਿੱਚ ਕੁਝ ਐਪਲੀਕੇਸ਼ਨ ਪੈਰਾਮੀਟਰਾਂ, ਜਿਵੇਂ ਕਿ ਡੇਟਾ ਅਤੇ ਵਿਵਹਾਰ, ਨਿਸ਼ਚ ਕਰੋ:

el: ਤੱਤ ਦਾ ਹਵਾਲਾ div defihtml ਵਿੱਚ ਪੂਰਾ ਹੋਇਆ
ਮਿਤੀ: ਡੇਟਾਸੈਟ

ਜਿਵੇਂ ਹੀ ਵਸਤੂ ਬਣਾਈ ਜਾਂਦੀ ਹੈ, Vue ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ div ਨਾਲ id vue-app ਅਤੇ ਪਲੇਸਹੋਲਡਰ ਨੂੰ ਬਦਲਣ ਦਾ ਧਿਆਨ ਰੱਖਦਾ ਹੈ {{ text }} ਡਾਟਾ ਆਬਜੈਕਟ ਦੇ ਅੰਦਰ ਮੌਜੂਦ ਮੁੱਲ ਦੇ ਨਾਲ। ਬੇਸ਼ੱਕ, ਇਸ ਵਸਤੂ ਵਿੱਚ ਇੱਕ ਤੋਂ ਵੱਧ ਸੰਪੱਤੀ ਹੋ ਸਕਦੀ ਹੈ, ਭਾਵੇਂ ਕਿ ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ: ਨੰਬਰ, ਐਰੇ ਅਤੇ ਹੋਰ ਨੇਸਟਡ ਆਬਜੈਕਟ ਵੈਧ ਹਨ

ਇਸ ਰਿਪਲੇਸਮੈਂਟ ਤੋਂ ਇਲਾਵਾ, Vue ਨੇ ਆਪਣੇ ਇੰਜਣ ਨੂੰ ਵੀ ਐਕਟੀਵੇਟ ਕਰ ਦਿੱਤਾ ਹੈ ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾ ਦਿੱਤਾ ਹੈ, ਯਾਨੀ ਟੈਕਸਟ ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ ਕੋਈ ਵੀ ਬਦਲਾਅ HTML ਵਿੱਚ ਸੰਬੰਧਿਤ ਤੱਤ ਦੇ ਤੁਰੰਤ ਅੱਪਡੇਟ ਦਾ ਕਾਰਨ ਬਣੇਗਾ।

Vue.js ਦਾ ਦੂਜਾ ਟੈਸਟ

ਦੂਜੀ ਅਜ਼ਮਾਇਸ਼ 'ਤੇ ਅੱਗੇ ਵਧਣ ਲਈ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਇੱਕ ਨਵਾਂ ਭਾਗ ਬਣਾਉਣ ਲਈ ਐਪ ਨੂੰ ਤਤਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਤੁਸੀਂ ਖੋਲ੍ਹੋ resources/app.js (o resources/js/app.js) ਅਤੇ ਇਸਦੀ ਸਮੱਗਰੀ ਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਅਨੁਸਾਰ ਅਪਡੇਟ ਕਰੋ:

// resources/app.js

require('./bootstrap');

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

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

ਇਸ ਫਾਈਲ ਵਿੱਚ ਅਸੀਂ ਇੱਕ ਨਵੀਂ Vue.js ਉਦਾਹਰਣ ਬਣਾ ਰਹੇ ਹਾਂ, ਅਤੇ ਅਜਿਹਾ ਕਰਨ ਲਈ ਸਾਨੂੰ ਇੱਕ Vue ਕੰਪੋਨੈਂਟ ਦੀ ਲੋੜ ਹੈ ਜਿਸਨੂੰ ਅਸੀਂ HelloVue.vue ਕਹਿੰਦੇ ਹਾਂ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਅਧਿਕਾਰਤ ਦਸਤਾਵੇਜ਼ਾਂ ਦੀ ਸਲਾਹ ਲਓ .

ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ resources/components/HelloVue.vue ਅਤੇ ਹੇਠ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਦਰਜ ਕਰੋ:

// resources/components/HelloVue.vue

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

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

ਜੋ ਫਾਈਲ ਅਸੀਂ ਹੁਣੇ ਬਣਾਈ ਹੈ ਉਹ ਇੱਕ ਬੁਨਿਆਦੀ Vue.js ਕੰਪੋਨੈਂਟ ਹੈ ਜੋ ਪ੍ਰਿੰਟ ਕਰਦਾ ਹੈ Hello Vue! ਆ header1 ਪੰਨੇ 'ਤੇ. ਅੰਤ ਵਿੱਚ, ਖੋਲ੍ਹੋ webpack.mix.js ਪ੍ਰੋਜੈਕਟ ਰੂਟ ਵਿੱਚ ਫਾਈਲ ਕਰੋ ਅਤੇ ਇਸਦੀ ਸਮੱਗਰੀ ਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਅਨੁਸਾਰ ਅਪਡੇਟ ਕਰੋ:

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

ਇਸ ਫਾਇਲ ਵਿੱਚ, ਢੰਗ ਕਾਲ .vue() ਕਿਸੇ ਵੀ Vue.js ਕੋਡ ਨੂੰ ਕੰਪਾਇਲ ਕਰੇਗਾ ਅਤੇ ਇਸਨੂੰ ਉਤਪਾਦਨ JavaScript ਫਾਈਲ ਵਿੱਚ ਬੰਡਲ ਕਰੇਗਾ। ਫੰਕਸ਼ਨ ਇੱਕ ਵਸਤੂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ defiVue.js ਦੇ ਸੰਸਕਰਣ ਨੂੰ ਨਿਸ਼ਚਤ ਕਰੋ ਜੋ ਤੁਸੀਂ ਵਰਤ ਰਹੇ ਹੋ।

ਫਾਈਲ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨ ਤੋਂ ਬਾਅਦ webpack.mix.js ਤੁਹਾਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਅਸੀਂ ਕਮਾਂਡ ਨੂੰ ਦੁਬਾਰਾ ਚਲਾਉਂਦੇ ਹਾਂ npm run dev.

ਅੰਤ ਵਿੱਚ, Vue ਨੂੰ ਕਾਰਜਸ਼ੀਲ ਤੌਰ 'ਤੇ ਅਜ਼ਮਾਉਣ ਲਈ, ਫਾਈਲ ਖੋਲ੍ਹੋ resources/views/welcome.blade.php ਅਤੇ ਹੇਠ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਦਰਜ ਕਰੋ:

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

ਕੋਡ, ਪਹਿਲਾਂ ਬਣਾਏ ਗਏ ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਲ, ਇੱਕ ਵੀਡੀਓ ਸੰਦੇਸ਼ ਤਿਆਰ ਕਰੇਗਾ ਹੈਲੋ Vue!, ਨਾਲ ਇੱਕ HTML ਤੱਤ 'ਤੇ Vue.js ਉਦਾਹਰਨ ਦੇ ਮਾਊਂਟ ਹੋਣ ਕਾਰਨ id app.

ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਚਲਾਓ php artisan serve, ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ ਮਨਪਸੰਦ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ।

Ercole Palmeri

ਤੁਹਾਨੂੰ ਵੀ ਇਸ ਵਿੱਚ ਦਿਲਚਸਪੀ ਹੋ ਸਕਦੀ ਹੈ ...