Question

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

单独地，我使用webpack，VueJs来处理html模板而不是使用Vue-route。

我的项目要求是：

将Lumen用于后端（API）
使用Laravel，VueJs和Vue-Route作为正面（Web）
使用WebPack for .Js，.css，.sass和Images类型（bundal.js，你知道我的意思是）

到目前为止我做了什么：

为Apis设置流明平台
设置前面的laravel

现在，我需要/想要使用laravel框架设置webpack，VueJs和Vue-route。此时我很困惑。

关于我的困惑，我几乎没有问题。

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

对于上述2个问题，我的想法是空白的。接下来要做什么以及怎么办？不知道。

因此，如果任何人可以解释如何使用Laravel，Webpack，VueJs和Vue-Route作为示例，那将是非常重要的。

Answer 1

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

您只需在 laravel 的服务器端转到您的路线文件即可抓住所有的网址，让它像vv一样处理。

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

现在您的每个请求都将提供index.blade.php页面，而vue-router将处理该URL并为该路由提供指定组件

然后转到你的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，以便在div中制作一个ID为#app的{{1}}，并且您很高兴

Answer 2

所以，如果你有后端的Lumen，一切都很好......那么分别使用Lumen和Vue.js。它会很棒并且有一些优势。

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

Laravel with webpack，VueJs和Vue-route

2 个答案: