Laravel 刀片模板更改为 vue 组件

Question

所以我最近只使用 Laravel 框架完成了我的项目。现在我已经完成了它，我想通过在不刷新布局页面的情况下刷新内容来将 vue.js 添加到我的项目中。而且我想将我的刀片文件转换为 vue 组件。我不知道怎么做，因为在我项目的每个部分，我有 4 个刀片文件，如索引、编辑、创建、显示，我不知道如何在组件中制作它，而且很难因为我使用的是 laravel 集体形式，这就是为什么每次我向数据库添加一些条目时它都会刷新。我也是 vuejs 的新手。有人可以帮我解决这个问题吗？非常感谢。我的文件夹目录是这样的。-roadmap---index.blade.php---show.blade.php---edit.blade.php---create.blade.php这是我的一些代码。路线图/index.blade.php@extends('layouts.admin')@section('content')<meta name="csrf-token" content="{{ csrf_token() }}"><!-- DATA TABLES --><script src="//code.jquery.com/jquery-1.12.3.js"></script><script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script><script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script><link rel="stylesheet"href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"><div><a class="btn btn-success" style="float:right" href="{{ route('roadmap.create') }}">Add Roadmap</a></div><table id="myTable" class="table table-hover">    <thead>      <tr>        <th scope="col">ID</th>        <th scope="col">Year Covered </th>        <th scope="col">Description</th>        <th scope="col">Date entered</th>        <th width="280px">Action</th>      </tr>    </thead>    <tbody>        @foreach ($roadmap as $data)        <tr>           <td>{{ $data->id }}</td>           <td>{{ $data->year}}</td>           <td>{{ $data->body}}</td>           <td>{{ $data->created_at}}</td>        <td>        <a href="/roadmap/{{$data->id}}/edit" class="btn btn-warning"><span class="glyphicon glyphicon-pencil"></span></a>        <a href="/roadmap/{{$data->id}}" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></a>        {!! Form::open(['method' => 'DELETE', 'route'=>['roadmap.destroy', $data->id], 'style'=> 'display:inline', 'onsubmit' => 'return confirm("Are you sure you want to delete?")']) !!}        {!! Form::button('<i class="fa fa-trash"></i>',['type'=>'submit', 'class'=> 'btn btn-danger']) !!}        {!! Form::close() !!}</td>@endsection