將'/'導向index.blade.php

在index.blade.php中

1、設定csrf_token

2、建立一個掛載點，<div id="app"></div>

在resource/asset/js/app.js中

// 先把專案自帶的demo引入
import example from './components/ExampleComponent';

// 利用render在#app上渲染這個元件
const app = new Vue({
    el: '#app',
    render: h => h(example)
});
 

執行npm run watch 或者npm run dev編譯

這樣vue檔案就渲染ok了。

2、引入element-ui等前端框架

npm i element-ui -S // 安裝Element-ui  

 引入element-ui及其主題

 import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

修改Example.vue 檔案，使用Element-ui的元件，修改為

<template>
    <div>
        <el-radio class="radio" v-model="radio" label="1">備選項</el-radio>
        <el-radio class="radio" v-model="radio" label="2">備選項</el-radio>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>
 

這時已經可以看到前端框架樣式了；

下面配置路由的history模式

app.router.js配置

import Vue from 'vue';
import VueRouter from 'vue-router'

Vue.use(VueRouter);

export default new VueRouter({
    mode: 'history',
    base: __dirname,
    linkActiveClass: 'active',
    routes: [
        {
            path:'/home',
            component: require('./home/Main'),
            // children : [
            //     {
            //         path:'/home/blog',
            //         component: require('./home/Main')
            //     }
            // ]
        },
        {
            path:'/blog',
            component: require('./blog/Main'),
            // children : [
            //     {
            //         path:'/home/blog',
            //         component: require('./home/Main')
            //     }
            // ]
        }
    ]
})

 到這裡還不夠，需要在laravel路由中繼續配置

// 開啟history模式，新增一條通配路由，當為404時，走此路由，可解決問題
Route::get('{path?}', 'Home\[email protected]')->where('path', '[\/\w\.-]*');

配置SaaS編譯，首先安裝依賴，在laravel-mix中配置，定義引入路徑。

mix.js('resources/assets/js/app.js', 'public/js').extract(['vue']).version().webpackConfig({
   resolve: {
       alias : {
           Sass: path.resolve(__dirname, 'resources/assets/sass'),
       }
   }
});

遇到的問題：

vue Uncaught ReferenceError: webpackJsonp is not defined at app.js:1

 這裡在index.blade.php中按順序引入：manifest，vendor即可，如下：

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

 配置完成。