Webpack 带有网页包、VueJs和Vue路由的Laravel

我参考了很多与webpack、VueJs和Vue Route相关的教程，但所有教程都是单独的。我在搜索一些教程，这些教程解释/展示了Laravel的Webpack、VueJs和Vue路线，但运气不好

就个人而言，我使用的是webpack，VueJs for html模板，而不是Vue路由

我的项目要求是：

• 使用流明作为后端（API）
• 使用Laravel、VueJs和Vue路线进行前端（Web）
• 为.Js、.css、.sass和图像类型（bundal.Js，你知道我的意思）使用WebPack

到目前为止我所做的：

• 为API设置流明平台
• 设置前部的laravel

现在，我需要/想要使用laravel框架设置webpack、VueJs和Vue路由。在这一点上，我感到困惑

我有几个问题与我的困惑有关

如何使用Laravel设置网页包。

如何将VueJs和Vue路由与Laravel路由一起使用。

对于以上两个问题，我的头脑是空白的。下一步要做什么以及如何做？我不知道

---

所以，如果有人能举例说明如何使用Laravel、Webpack、VueJs和Vue Route，那就太棒了

当您安装新的laravel应用程序时，laravel已经安装了webpack，并且安装了易于使用的laravel mix。

您只需在服务器端的laravel中转到路由文件 捕获所有URL，并让它像这样由vue处理

 Route::get('{any}', function () {
    return view('index');
})->where('any' , ".*");

现在，您的每个请求都将服务于

index.blade.php

页面，vue路由器将处理url并为该路由提供指定组件

然后转到cmd安装依赖项，如

npm安装vue路由器-save

etc

安装所需的依赖项后

我想你可能已经知道如何单独使用vue路由器了 例如，转到app.js文件，在此处编写所有

vue

和

vue路由器

代码

    import Vue from 'vue';

    window.axios = require('axios');    
   Vue.prototype.$http = axios;

  import VueRouter from 'vue-router'
  import home from './components/pages/home.vue'
  import App from './App.vue'

  Vue.use(VueRouter);

 let routes = [
    {
        path :'/',
        name :'home',
        component : home
    },
]

let Router =  new VueRouter({
    routes : routes,
    mode : 'history'
})


    const app = new Vue({
        el : '#app',
        router : Router,
        render : h => h(App)
    });

最后，在cmd中运行

npm运行dev

脚本。将生成的

js

文件发送到

index.blade.php

服务器根据每个请求提供的页面

当我们向vue提供

el:#app

以在

index.blade.php

中创建一个id为

#app

的

div

时，您就可以开始了

所以，如果你有Lumen作为后端，并且一切正常……那么就分别使用Lumen和Vue.js。这将非常好，并且有一些优势

保持Lumen原样，创建一个新的vue.js应用程序。然后安装vue路由器 你就完了