PJ Blog

// 項目根目錄下執行
npm run watch

> @ watch D:\wamp\www\blog

> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

app
resources
  assets
    - js
  lang
  views

• webpack.min.js
  解析模塊時應該搜索的目錄

解析模塊好復雜啊，到處都有
mix.webpackConfig({
    resolve: {
        alias: {
            'components': 'assets/js/components',
            'config': 'assets/js/config',
            'lang': 'assets/js/lang',
            'plugins': 'assets/js/plugins',
            'vendor': 'assets/js/vendor',
            'views': 'assets/js/views',
            'dashboard': 'assets/js/views/dashboard',
        },
        modules: [
          'node_modules',
          path.resolve(__dirname, "resources")
        ]
    },
})

resolve.alias
創建 import 或 require 的別名，來確保模塊引入變得更簡單。例如，一些位于 src/ 文件夾下的常用模塊：

resolve.alias

resolve.modules
告訴 webpack 解析模塊時應該搜索的目錄。
絕對路徑和相對路徑都能使用，但是要知道它們之間有一點差異。通過查看當前目錄以及祖先路徑（即 ./node_modules, ../node_modules 等等），相對路徑將類似于 Node 查找 'node_modules' 的方式進行查找。

使用絕對路徑，將只在給定目錄中搜索。

resolve.modules defaults to:
modules: ["node_modules"]

如果你想要添加一個目錄到模塊搜索目錄，此目錄優先于 node_modules/ 搜索：

modules: [path.resolve(__dirname, "src"), "node_modules"]

• 多語言 vue-i18n

/resources/assets/js/views/dashboard/System.vue
$t 怎么實現的哩
{{ $t(pages.systems) }}

/resources/assets/js/app.js
  import locales from 'lang'
  import VueI18n from 'vue-i18n';
  Vue.config.lang = Window.language
  const i18n = new VueI18n({
    locale: Vue.config.lang,
    messages: locales
  })

• 為什么要用兩套路由系統
  // vue 路由
  resources/assets/js/routers.js

  // php 交互路由
  routes/api.php

  routers.js是vue的路由，是前端界面;
  api.php是后端路由

• dashboard 后臺首頁

http://blog.app/dashboard/home

路由
resources/assets/js/routes.js
  export defaults [
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: requireAuth,
    children: [
      {
        path: '/',
        redirect: '/dashboard/home'
      },
      {
        path: '/home',
        component: require('dashboard/Home.vue')
        // 此處的 dashboard 即為之前配置的解析別名模塊
        // 'dashboard': 'assets/js/views/dashboard',
      }
      ......
    ]
  ]

resources/assets/js/views/dashboard/Home.vue
export default {
    components: {
        Chart
    },
    data () {
        return {
            statistics: {}
        }
    },
    mounted() {
        this.$http.get('statistics')
            .then((response) => {
                this.statistics = response
            })
    }
}
路由 statistics 在 api.php 路由文件中定義
請求響應包含以下內容
{
  // `data` 由服務器提供的響應
  data: {},

  // `status` 來自服務器響應的 HTTP 狀態碼
  status: 200,

  // `statusText` 來自服務器響應的 HTTP 狀態信息
  statusText: 'OK',

  // `headers` 服務器響應的頭
  headers: {},

  // `config` 是為請求提供的配置信息
  config: {}
}

this.$http.get
vue 不再推薦使用 vue-resource， 推薦使用 axios

resources/assets/js/plugins/http/index.js
該文件實現 Vue 中 this.$http.get() 使用 axios 庫

• vue-table

/resources/assets/js/components/particals/Table.vue
<vue-table></vue-table>

resources/assets/js/app.js
Vue.component(
    'vue-table',
    require('components/dashboard/Table.vue')
);

resources/assets/js/components/dashboard/Table.vue

• vue-router 路由插件

組件 vue-router
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

<router-link> automatically gets the .router-link-active class 
when its target route is matched

<router-view></router-view>
Nested Routes
<div id="app">
  <router-view></router-view>
</div>
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})


The <router-view> here is a top-level outlet. 
It renders the component matched by a top level route. 
Similarly, a rendered component can also contain its own, nested <router-view>. 
For example, if we add one inside the User component's template:

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

后臺的控制器放在 Api 目錄，思想就是當做接口的形式給 Vue 返回數據呀
Fractal provides a presentation and transformation layer for complex data output, the like found in RESTful APIs,
and works really well with JSON. Think of this as a view layer for your JSON/YAML/etc.

• User.vue 用戶列表首頁
  還不知道怎讀請求的數據過來呀!

包含 Table.vue 文件
loadData() {
// User.vue 文件中 <vue-table></vue-table> 節點有屬性 api-url="user"
var url = this.apiUrl // 從哪里取的值

}

resources/assets/js/views/dashboard/user/User.vue

<template>
    <div class="row">
        <vue-table :title="$t('page.users')" :fields="fields" api-url="user" 
            @table-action="tableActions" show-paginate>
            <div slot="buttons">
                <router-link to="/dashboard/users/create" class="btn btn-success">
                  {{ $t('page.create') }}
                </router-link>
            </div>
        </vue-table>
    </div>
</template>