Laravel 与 webpack、VueJs 和 Vue-route答案

【问题标题】：Laravel with webpack , VueJs and Vue-routeLaravel 与 webpack、VueJs 和 Vue-route
【发布时间】：2017-04-29 05:22:08
【问题描述】：

我参考了很多与 webpack、VueJs 和 Vue-Route 相关的教程，但所有教程都是单独的。我正在寻找解释/展示 Laravel 与 Webpack 、 VueJs 和 Vue-route 的教程，但运气不好。

就个人而言，我使用 webpack 和 VueJs 处理 html 模板，而不是使用 Vue-route。

我的项目要求是：

将 Lumen 用于后端 (API)
将 Laravel、VueJs 和 Vue-Route 用于前端（Web）
将 WebPack 用于 .Js 、 .css 、 .sass 和图像类型（bundal.js，我的意思是你懂的）

到目前为止我做了什么：

为 Apis 搭建 Lumen 平台
为前端设置 laravel

现在，我需要/想要使用 laravel 框架设置 webpack、VueJs 和 Vue-route。在这一点上我很困惑。

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

如何使用 Laravel 设置 webpack。
如何在 Laravel Route 中使用 VueJs 和 Vue-route。

对于以上 2 个问题，我的大脑一片空白。接下来要做什么以及怎么做？没有任何想法。

因此，如果有人可以举例说明如何使用 Laravel 、 Webpack 、 VueJs 和 Vue-Route ，那就太棒了。

【问题讨论】：

标签： webpack laravel-5.3 vuejs2 vue-router

【解决方案1】：

当你安装一个新的 laravel 应用程序时，laravel 已经安装了 webpack 并且易于使用 laravel-mix 安装..

您所要做的就是在 laravel 中的服务器端转到您的路由文件捕获所有的 url 并让 vue 像这样处理它。

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

现在您的每个请求都将服务于 index.blade.php 页面，vue-router 将处理 url 并为该路由提供 specifig 组件

然后转到您的 cmd 安装依赖项，如 npm install vue-router -save 等

安装所需的依赖项后。

我假设您可能已经知道如何单独使用 vue 路由器转到 app.js 文件，例如在这里写下你所有的 vue 和 vue-router 代码

    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 run dev 脚本。将生成的 js 文件提供给 index.blade.php 服务器在每个请求上提供的页面

因为我们正在向 vue 提供 el : #app 以在 index.blade.php 中创建一个 ID 为 #app 的 div，所以你很高兴

【讨论】：

【解决方案2】：

所以如果你有 Lumen 作为后端并且一切正常......那么分别使用 Lumen 和 Vue.js。它会很棒并且有一些优势。

保持 Lumen 不变并创建一个新的 vue.js 应用程序。然后安装 vue-router 你就完成了。

【讨论】：