// 项目根目录下执行
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.phprouters.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>
