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