// 項(xiàng)目根目錄下執(zhí)行
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
解析模塊時(shí)應(yīng)該搜索的目錄
解析模塊好復(fù)雜啊，到處都有
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
創(chuàng)建 import 或 require 的別名，來確保模塊引入變得更簡單。例如，一些位于 src/ 文件夾下的常用模塊：
resolve.alias
resolve.modules
告訴 webpack 解析模塊時(shí)應(yīng)該搜索的目錄。
絕對(duì)路徑和相對(duì)路徑都能使用，但是要知道它們之間有一點(diǎn)差異。通過查看當(dāng)前目錄以及祖先路徑（即 ./node_modules, ../node_modules 等等），相對(duì)路徑將類似于 Node 查找 'node_modules' 的方式進(jìn)行查找。
使用絕對(duì)路徑，將只在給定目錄中搜索。
resolve.modules defaults to:
modules: ["node_modules"]
如果你想要添加一個(gè)目錄到模塊搜索目錄，此目錄優(yōu)先于 node_modules/ 搜索：
modules: [path.resolve(__dirname, "src"), "node_modules"]
- 多語言 vue-i18n
/resources/assets/js/views/dashboard/System.vue
$t 怎么實(shí)現(xiàn)的哩
{{ $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
})
-
為什么要用兩套路由系統(tǒng)
// vue 路由
resources/assets/js/routers.js// php 交互路由
routes/api.phprouters.js是vue的路由，是前端界面;
api.php是后端路由
- dashboard 后臺(tái)首頁
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 路由文件中定義
請求響應(yīng)包含以下內(nèi)容
{
// `data` 由服務(wù)器提供的響應(yīng)
data: {},
// `status` 來自服務(wù)器響應(yīng)的 HTTP 狀態(tài)碼
status: 200,
// `statusText` 來自服務(wù)器響應(yīng)的 HTTP 狀態(tài)信息
statusText: 'OK',
// `headers` 服務(wù)器響應(yīng)的頭
headers: {},
// `config` 是為請求提供的配置信息
config: {}
}
this.$http.get
vue 不再推薦使用 vue-resource， 推薦使用 axios
resources/assets/js/plugins/http/index.js
該文件實(shí)現(xiàn) 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>
`
}
后臺(tái)的控制器放在 Api 目錄，思想就是當(dāng)做接口的形式給 Vue 返回?cái)?shù)據(jù)呀
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 用戶列表首頁
還不知道怎讀請求的數(shù)據(jù)過來呀!
包含 Table.vue 文件
loadData() {
// User.vue 文件中 <vue-table></vue-table> 節(jié)點(diǎn)有屬性 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>
