Laravel ಮತ್ತು Vue.js ಜೊತೆಗೆ CRUD ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸಲಾಗುತ್ತಿದೆ

ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ ನಾವು Laravel ಮತ್ತು Vue.js ನೊಂದಿಗೆ ಉದಾಹರಣೆ CRUD ಅಪ್ಲಿಕೇಶನ್‌ನ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಬರೆಯುವುದು ಎಂಬುದನ್ನು ಒಟ್ಟಿಗೆ ನೋಡುತ್ತೇವೆ.

La ಏಕ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್ DB ನಲ್ಲಿ ಮೂಲಭೂತ ಕಾರ್ಯಾಚರಣೆಗಳ ಚಕ್ರವನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ: ಇದರೊಂದಿಗೆ ರಚಿಸಿ, ಓದಿ, ನವೀಕರಿಸಿ ಮತ್ತು ಅಳಿಸಿ Vue.js , Vue ಮಾರ್ಗನಿರ್ದೇಶಕಗಳು ಮತ್ತು ಲಾರಾವೆಲ್ ಫ್ರೇಮ್ವರ್ಕ್ .

ಇತ್ತೀಚಿನ ದಿನಗಳಲ್ಲಿ, ಅತ್ಯಂತ ಜನಪ್ರಿಯ JS ಚೌಕಟ್ಟುಗಳು ಕೋನೀಯ JS ಮತ್ತು Vue JS. ಕೋನೀಯ JS ಮತ್ತು Vue JS ಅತ್ಯಂತ ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಮತ್ತು ಅತ್ಯಂತ ಜನಪ್ರಿಯ JS ಚೌಕಟ್ಟುಗಳಾಗಿವೆ. ಇದು ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡದೆಯೇ ಸಂಪೂರ್ಣ ಯೋಜನೆ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ನ ನಿರ್ವಹಣೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರಬಲವಾದ jquery ಮೌಲ್ಯೀಕರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.

Vue Laravel ನೊಂದಿಗೆ ಪೂರ್ವ-ಪ್ಯಾಕ್ ಮಾಡಲಾಗಿದೆ (ಜೊತೆಗೆ ಲಾರಾವೆಲ್ ಮಿಕ್ಸ್ , ಆಧಾರಿತ ಅತ್ಯುತ್ತಮ ಲೇಖಕರ ಸಾಧನ ವೆಬ್ಪ್ಯಾಕ್ ) ಮತ್ತು ಡೆವಲಪರ್‌ಗಳು ಟ್ರಾನ್ಸ್‌ಪೈಲರ್‌ಗಳು, ಕೋಡ್ ಪ್ಯಾಕೇಜುಗಳು, ಮೂಲ ನಕ್ಷೆಗಳು ಅಥವಾ ಆಧುನಿಕ ಮುಂಭಾಗದ ಅಭಿವೃದ್ಧಿಯ ಇತರ "ಕೊಳಕು" ಅಂಶಗಳ ಬಗ್ಗೆ ಚಿಂತಿಸದೆ ಸಂಕೀರ್ಣವಾದ ಏಕ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಾರಂಭಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ವಿಷಯ ಸೂಚ್ಯಂಕ

ಸರ್ವರ್ ಅವಶ್ಯಕತೆಗಳು

ಪಿಎಚ್ಪಿ 7.4

ಲಾರಾವೆಲ್ 8.x

MySQL

Laravel ಯೋಜನೆಯನ್ನು ಸ್ಥಾಪಿಸಿ

ಮೊದಲಿಗೆ, ಟರ್ಮಿನಲ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಹೊಸ ಲಾರಾವೆಲ್ ಯೋಜನೆಯನ್ನು ರಚಿಸಲು ಈ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:

composer create-project --prefer-dist laravel/laravel crud-spa

ಅಥವಾ, ನೀವು Laravel Installer ಅನ್ನು ಸಂಯೋಜಕರ ಜಾಗತಿಕ ಅವಲಂಬನೆಯಾಗಿ ಸ್ಥಾಪಿಸಿದ್ದರೆ:

laravel new crud-spa

ಡೇಟಾಬೇಸ್ ವಿವರಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ:

ಅನುಸ್ಥಾಪನೆಯ ನಂತರ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ರೂಟ್ ಡೈರೆಕ್ಟರಿಗೆ ಹೋಗಿ, .env ಫೈಲ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಡೇಟಾಬೇಸ್ ವಿವರಗಳನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಹೊಂದಿಸಿ:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>

npm ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ

ಮುಂಭಾಗದ ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಲು ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:

npm install

ಅದರ ನಂತರ, ಸ್ಥಾಪಿಸಿ vue , ವ್ಯೂ-ರೂಟರ್ e ವ್ಯೂ-ಆಕ್ಸಿಯಾಸ್ . Laravel ಬ್ಯಾಕೆಂಡ್ API ಅನ್ನು ಕರೆಯಲು Vue-axios ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಟರ್ಮಿನಲ್‌ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:

npm install vue vue-router vue-axios --save

ವಲಸೆ, ಮಾದರಿ ಮತ್ತು ನಿಯಂತ್ರಕವನ್ನು ರಚಿಸಿ

ವರ್ಗ ಟೆಂಪ್ಲೇಟ್, ವಲಸೆ ಮತ್ತು ನಿಯಂತ್ರಕವನ್ನು ರಚಿಸಿ. ಅದಕ್ಕಾಗಿ ಈ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:

php artisan make:model Category -mcr

-ಎಂಸಿಆರ್ ಈ ವಿಷಯವು ಏಕ ಕಮಾಂಡ್ ಸಿಂಥೆಸಿಸ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಮಾದರಿ, ವಲಸೆ ಮತ್ತು ನಿಯಂತ್ರಕವನ್ನು ರಚಿಸುತ್ತದೆ.

ಈಗ, ವರ್ಗದ ವಲಸೆ ಫೈಲ್ ಅನ್ನು ತೆರೆಯಿರಿ ಡೇಟಾಬೇಸ್ / ವಲಸೆ ಮತ್ತು ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯಕ್ಕೆ ಬದಲಾಯಿಸಿ ಮೇಲೆ () :

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->text('description');
        $table->timestamps();
    });
}

ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಡೇಟಾಬೇಸ್ ಅನ್ನು ಸ್ಥಳಾಂತರಿಸಿ:

php artisan migrate

ಈಗ, Category.php ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ತೆರೆಯಿರಿapp/Models ಮತ್ತು ಫೈಲ್‌ನಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಸಂಪಾದಿಸಿ model Category.php:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Category extends Model {

   use HasFactory;

   protected $fillable = ['title','description'];

}

?>

ಅದರ ನಂತರ, ತೆರೆಯಿರಿ CategoryController.php ಮತ್ತು ಸೂಚ್ಯಂಕದಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಿ, ಈ ಕೆಳಗಿನಂತೆ ವಿಧಾನಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ, ನವೀಕರಿಸಿ ಮತ್ತು ಅಳಿಸಿ:

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use Illuminate\Http\Request;

class CategoryController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $categories = Category::all(['id','title','description']);
        return response()->json($categories);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $category = Category::create($request->post());
        return response()->json([
            'message'=>'Category Created Successfully!!',
            'category'=>$category
        ]);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function show(Category $category)
    {
        return response()->json($category);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Category $category)
    {
        $category->fill($request->post())->save();
        return response()->json([
            'message'=>'Category Updated Successfully!!',
            'category'=>$category
        ]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function destroy(Category $category)
    {
        $category->delete();
        return response()->json([
            'message'=>'Category Deleted Successfully!!'
        ]);
    }
}

Defiweb.php ನಲ್ಲಿ ಮಾರ್ಗಗಳನ್ನು ಮುಗಿಸಿ

ಓರಾ defiಅವುಗಳನ್ನು ಮುಗಿಸಿ routes ಕಡತಗಳಲ್ಲಿ web.php e api.php . ಫೋಲ್ಡರ್‌ಗೆ ಹೋಗಿ routes ಮತ್ತು web.php ಮತ್ತು api.php ಫೈಲ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಕೆಳಗಿನವುಗಳನ್ನು ನವೀಕರಿಸಿ routes:

routes/web.php

<?php
 
Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');

routes/api.php

<?php
 
Route::resource('category',App\Http\Controllers\CategoryController::class)->only(['index','store','show','update','destroy']);

Vue ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸಿ

ಈ ಹಂತದಲ್ಲಿ, ಡೈರೆಕ್ಟರಿಗೆ ಹೋಗಿ ಸಂಪನ್ಮೂಲ/ವೀಕ್ಷಣೆಗಳು, ಫೈಲ್ ಅನ್ನು ರಚಿಸಿ app.blade.php ಮತ್ತು ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಿ app.blade.php:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" value="{{ csrf_token() }}"/>
        <title>Laravel Vue CRUD App</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id="app">
        </div>
        <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
    </body>
</html>

Vue ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ಘಟಕವನ್ನು ರಚಿಸಿ

ಈ ಹಂತದಲ್ಲಿ, ಫೋಲ್ಡರ್ಗೆ ಹೋಗಿ resource/js, ಫೋಲ್ಡರ್ ರಚಿಸಿ components ಮತ್ತು ಫೈಲ್‌ಗಳನ್ನು ಈ ಕೆಳಗಿನಂತೆ ರಚಿಸಿ:

View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue

ಅಪ್ಲಿಕೇಶನ್ ವ್ಯೂ ಇದು ನಮ್ಮ Vue ಅಪ್ಲಿಕೇಶನ್‌ನ ಮುಖ್ಯ ಫೈಲ್ ಆಗಿದೆ. Defiನಾವು ಮುಗಿಸುತ್ತೇವೆ ರೂಟರ್-ವೀಕ್ಷಣೆ ಆ ಕಡತದಲ್ಲಿ. ಎಲ್ಲಾ ಮಾರ್ಗಗಳು ಫೈಲ್‌ನಲ್ಲಿ ಗೋಚರಿಸುತ್ತವೆ ಅಪ್ಲಿಕೇಶನ್ ವ್ಯೂ .

ಫೈಲ್ ತೆರೆಯಿರಿ Welcome.vue ಮತ್ತು ಆ ಫೈಲ್‌ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ನವೀಕರಿಸಿ:

<template>
    <div class="container mt-5">
        <div class="col-12 text-center">
            <h1>Laravel Vuejs CRUD</h1>
        </div>
    </div>
</template>

App.vue ಫೈಲ್ ತೆರೆಯಿರಿ ಮತ್ತು ಕೋಡ್ ಅನ್ನು ಈ ಕೆಳಗಿನಂತೆ ನವೀಕರಿಸಿ:

<template>
    <main>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <router-link to="/" class="navbar-brand" href="#">Laravel Vue Crud App</router-link>
                <div class="collapse navbar-collapse">
                    <div class="navbar-nav">
                        <router-link exact-active-class="active" to="/" class="nav-item nav-link">Home</router-link>
                        <router-link exact-active-class="active" to="/category" class="nav-item nav-link">Category</router-link>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container mt-5">
            <router-view></router-view>
        </div>
    </main>
</template>
 
<script>
    export default {}
</script>

ನಂತರ, ತೆರೆಯಿರಿ resource / js / components / category / List.vue ಮತ್ತು ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಫೈಲ್‌ನಲ್ಲಿ ಸೇರಿಸಿ:

<template>
    <div class="row">
        <div class="col-12 mb-2 text-end">
            <router-link :to='{name:"categoryAdd"}' class="btn btn-primary">Create</router-link>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Category</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody v-if="categories.length > 0">
                                <tr v-for="(category,key) in categories" :key="key">
                                    <td>{{ category.id }}</td>
                                    <td>{{ category.title }}</td>
                                    <td>{{ category.description }}</td>
                                    <td>
                                        <router-link :to='{name:"categoryEdit",params:{id:category.id}}' class="btn btn-success">Edit</router-link>
                                        <button type="button" @click="deleteCategory(category.id)" class="btn btn-danger">Delete</button>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody v-else>
                                <tr>
                                    <td colspan="4" align="center">No Categories Found.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"categories",
    data(){
        return {
            categories:[]
        }
    },
    mounted(){
        this.getCategories()
    },
    methods:{
        async getCategories(){
            await this.axios.get('/api/category').then(response=>{
                this.categories = response.data
            }).catch(error=>{
                console.log(error)
                this.categories = []
            })
        },
        deleteCategory(id){
            if(confirm("Are you sure to delete this category ?")){
                this.axios.delete(`/api/category/${id}`).then(response=>{
                    this.getCategories()
                }).catch(error=>{
                    console.log(error)
                })
            }
        }
    }
}
</script>

ಅದರ ನಂತರ, ತೆರೆಯಿರಿ resource /js/components/category/Add.vue ಮತ್ತು ಫೈಲ್‌ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ನವೀಕರಿಸಿ:

<template>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Add Category</h4>
                </div>
                <div class="card-body">
                    <form @submit.prevent="create">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" v-model="category.title">
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Description</label>
                                    <input type="text" class="form-control" v-model="category.description">
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"add-category",
    data(){
        return {
            category:{
                title:"",
                description:""
            }
        }
    },
    methods:{
        async create(){
            await this.axios.post('/api/category',this.category).then(response=>{
                this.$router.push({name:"categoryList"})
            }).catch(error=>{
                console.log(error)
            })
        }
    }
}
</script>

ಅದರ ನಂತರ, ತೆರೆಯಿರಿ resource /js/components/category/Edit.vue ಮತ್ತು ಫೈಲ್‌ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ನವೀಕರಿಸಿ:


<template>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Update Category</h4>
                </div>
                <div class="card-body">
                    <form @submit.prevent="update">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" v-model="category.title">
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Description</label>
                                    <input type="text" class="form-control" v-model="category.description">
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"update-category",
    data(){
        return {
            category:{
                title:"",
                description:"",
                _method:"patch"
            }
        }
    },
    mounted(){
        this.showCategory()
    },
    methods:{
        async showCategory(){
            await this.axios.get(`/api/category/${this.$route.params.id}`).then(response=>{
                const { title, description } = response.data
                this.category.title = title
                this.category.description = description
            }).catch(error=>{
                console.log(error)
            })
        },
        async update(){
            await this.axios.post(`/api/category/${this.$route.params.id}`,this.category).then(response=>{
                this.$router.push({name:"categoryList"})
            }).catch(error=>{
                console.log(error)
            })
        }
    }
}
</script>

DefiVue ರೂಟರ್‌ನಲ್ಲಿ CRUD ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಮಾರ್ಗವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ

ಈಗ, ನೀವು ಮಾಡಬೇಕು defiಮುಗಿಸಿ Vue routes, ಮತ್ತು ಇದನ್ನು ಮಾಡಲು ಫೋಲ್ಡರ್‌ಗೆ ಹೋಗಿ resource / js , ಫೈಲ್ ಅನ್ನು ರಚಿಸಿ route.js ಮತ್ತು ಫೈಲ್‌ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ನವೀಕರಿಸಿ:

const Welcome = () => import('./components/Welcome.vue' /* webpackChunkName: "resource/js/components/welcome" */)
const CategoryList = () => import('./components/category/List.vue' /* webpackChunkName: "resource/js/components/category/list" */)
const CategoryCreate = () => import('./components/category/Add.vue' /* webpackChunkName: "resource/js/components/category/add" */)
const CategoryEdit = () => import('./components/category/Edit.vue' /* webpackChunkName: "resource/js/components/category/edit" */)

export const routes = [
    {
        name: 'home',
        path: '/',
        component: Welcome
    },
    {
        name: 'categoryList',
        path: '/category',
        component: CategoryList
    },
    {
        name: 'categoryEdit',
        path: '/category/:id/edit',
        component: CategoryEdit
    },
    {
        name: 'categoryAdd',
        path: '/category/add',
        component: CategoryCreate
    }
]

ಇಲ್ಲಿ ನಾವು ಘಟಕಗಳನ್ನು ಬಳಸಿದ್ದೇವೆ ನಿಧಾನ ಲೋಡ್. ವ್ಯೂ ಜೆಎಸ್ ಒಂದು ರೀತಿಯಲ್ಲಿ ಘಟಕಗಳ ಲೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ lazy ಮಾರ್ಗಗಳೊಂದಿಗೆ, ಆದ್ದರಿಂದ DOM ನಲ್ಲಿ ನೀವು ಪಾಥ್‌ಗಳ ಮೂಲಕ ಅಗತ್ಯವಿರುವಾಗ ಮಾತ್ರ ಘಟಕಗಳನ್ನು ಲೋಡ್ ಮಾಡಬಹುದು.

app.js ನಲ್ಲಿ Vue.js ಅವಲಂಬನೆಗಳನ್ನು ಸೇರಿಸಿ

ಈಗ ನೀವು ಎಲ್ಲಾ ಮಾರ್ಗಗಳು, ವ್ಯೂ-ಆಕ್ಸಿಯೊಗಳು ಮತ್ತು ಇತರ ಅವಲಂಬನೆಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ.

resource / js / app.js

require('./bootstrap');
import vue from 'vue'
window.Vue = vue;

import App from './components/App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
 
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

webpack.mix.js ಅನ್ನು ನವೀಕರಿಸಿ

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue();