vue Blog 学习笔记 (1) 安装、页面显示

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>