一、Vue 環境

1. 使用 Vue 2 版本
2. 加入 vuex 插件, 讓資料可以在 Vue 組件間共用
3. 加入 vur-router 插件
4. Laravel 預設內容
   • resource/js/app.js 主要是將 Vue 掛載到頁面
   • resource/js/bootstrap.js 將一些插件掛載到 window 上
     • axios 插件, 負責請求 API 取回資料

二、vuex 安裝與配置

1. npm 安裝

    // 至網站根目錄下執行 npm
    // 安裝 vuex 最新 3.* 版, 安裝 4.* 在使用時會報錯 
    npm i vuex@^3.* --save-dev

2. 建立檔案 resource/js/src/store/index.js 設定 vuex 的配置

    // 引入 Vue
    import Vue from 'vue'
    // 引入Vuex
    import Vuex from 'vuex'
    // Vue 使用插件 Vuex
    Vue.use(Vuex)

    // 配置 action 動作, 提供給使用者在組件中觸發
    // 會在此階段呼叫 API
    const actions = {}
    
    // 準備 mutations 方法, 在 actoin 被觸發後執行完相關動作後, 
    // 會 commit 到指定的 mutations 方法, 再由此方法修改 state 內容
    const mutations = {}
    
    // 保存共用數據的地方
    const state = {}

    // 新建一個 Vuex 實例
    export default new Vuex.Store({
        actions,
        mutations,
        state
    })

3. resource/js/app.js 內引入 src/store/index.js, 在 new Vue 時使用

    // ... 其他省略
    import store from './src/store'
    
    // 設定 store 到 Vue 中
    const app = new Vue({
        el: '#app',
        store
    });

三、 vue-router 安裝與配置

1. npm 安裝

    npm i vue-router@^3.* --save-dev

2. 建立檔案 resource/js/src/router/index.js 設定 vue-router 的配置

    import Vue from 'vue'
    // 引入 router 插件
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

    // 引入 Components
    import Product from '../../components/ProductComponent'
    
    // 設定路由
    export default new VueRouter({
        routes:[
            {
                path: '/product',
                component: Product
            }
        ]
    })

3. resource/js/app.js 內引入 src/router/index.js, 在 new Vue 時使用

    // ... 其他省略
    import router from './router'
    
    // 設定 store 到 Vue 中
    const app = new Vue({
        el: '#app',
        store,
        router
    });

四、檢視插件安裝是否成功

• 使用 Vue.js devtools 檢視是否有成功引入 vue-router 和 vuex
  

github 進版
剩下的明天繼續