laravel5.5已经集成了vue和axios了，
axios可以结合vue做ajax请求
我们还需要一个东西，那就是vue-router
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.0",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"vue": "^2.5.7",
"vue-router": "^3.0.1"
}把vue-router集成上去，然后运行npm install
上一步我们已经建立好了前端页面，还是以文章为例
在resources/assets/js下建立文件夹common，并建立application.js和mobile.js, 2个文件大同小异，最主要是区分前端路由
在js下会看到一个app.js文件，我们把他拷贝一下
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
然后在跟目录下找到webpack.mix.js，在里面添加application.js和mobile.js
.js('resources/assets/js/common/application.js', 'public/js')
.js('resources/assets/js/common/mobile.js', 'public/js')然后运行npm run watch
由于只做学习使用，样式我没写，需要样式的也可以添加到这里，使用的是sass，你需要安装ruby环境
在assets的components下面放的就是vue文件，laravel也给出了一个实例
我们新建3个文件：Header.vue，Footer.vue，ArticleList.vue，分别为页面头部，页面尾部和文章列表，页面头部我们需要获取导航，页面尾部我们需要获取网站配置
先看导航，同样我只考虑二级导航
<template>
<ul>
<!--分类列表-->
<li v-for="category in results" :key="category.id">
<a :href="[category.module+'/'+category.id]">{{ category.title }} </a>
<ul v-if="category.children != ''">
<li v-for="child in category.children" :key="child.id">
<a :href="[child.module+'/'+child.id]">{{ child.title }} </a>
</li>
</ul>
</li>
</ul>
</template>
<script>
export default {
data () {
return {
results: []
}
},
mounted() {
var that = this
axios.get('/api/categories')
.then(function (response) {
that.results = response.data.data
});
}
}
</script>
template是要渲染的模板，我们通过axios请求我们的api，并渲染数据，模板的a标签页可以使用router-link标签，但是我在使用的时候url地址变了，页面数据没刷新，当然，有解决方式，但我本来就是结合前端页面的，所以我直接使用了a标签，手机端需要加上mobile前缀
<template>
<ul>
<!--分类列表-->
<li v-for="category in results" :key="category.id">
<a :href="['/mobile/'+category.module+'/'+category.id]">{{ category.title }} </a>
<ul v-if="category.children != ''">
<li v-for="child in category.children" :key="child.id">
<a :href="['/mobile/'+child.module+'/'+child.id]">{{ child.title }} </a>
</li>
</ul>
</li>
</ul>
</template>
<script>
export default {
data () {
return {
results: []
}
},
mounted() {
var that = this
axios.get('/api/categories')
.then(function (response) {
that.results = response.data.data
});
}
}
</script>
Footer.vue
<template>
<footer>
<!--文章列表-->
<span>
地址： {{ results.address }} 备案： {{ results.copyright }}
</span>
</footer>
</template>
<script>
export default {
data () {
return {
results: []
}
},
mounted() {
var that = this
axios.get('/api/config')
.then(function (response) {
that.results = response.data.data
});
}
}
</script>
ArticleList.vue
<template>
<ul>
<!--文章列表-->
<li v-for="product in results" :key="product.id">
{{ product.title }}
<img :src="'/'+product.image" />
</li>
</ul>
</template>
<script>
export default {
data () {
return {
category: '',
results: [],
page: []
}
},
mounted() {
var that = this
that.category = that.$route.params.category
axios.get('/api/products/'+ that.category)
.then(function (response) {
that.results = response.data.data
that.page = response.data.meta
});
}
}
</script>
这里注意下src，了解下vue事件绑定和属性渲染
还有就是router变量，我们需要传入才可以获取到
vue已经有了，接下来就是把vue渲染到页面上
打开前面建立的application.js，在已有代码的基础上，我们需要添加路由和注册组件
添加路由，我们使用的是vue-router，把它引入进来
import VueRouter from 'vue-router';
Vue.use(VueRouter);然后注册路由
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/' },
{ path: '/pages/:category?', name: "pages" },
{ path: '/products/:category?', name: 'products' },
{ path: '/product/:id', name: 'product' },
{ path: '/articles/:category?', name: 'articles' },
{ path: '/article/:id', name: 'article' },
{ path: '/jobs/:category', name: 'jobs' }
]
})注册组件，我是用的是全局注册
Vue.component('header-box', require('../components/Header.vue'));
Vue.component('footer-box', require('../components/Footer.vue'));
Vue.component('article-list', require('../components/ArticleList.vue'));
Vue.component('product-list', require('../components/ProductList.vue'));
Vue.component('page-show', require('../components/PageShow.vue'));绑定组件
new Vue({
el: '#app',
router,
});完整代码如下：
require('../bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/' },
{ path: '/pages/:category?', name: "pages" },
{ path: '/products/:category?', name: 'products' },
{ path: '/product/:id', name: 'product' },
{ path: '/articles/:category?', name: 'articles' },
{ path: '/article/:id', name: 'article' },
{ path: '/jobs/:category', name: 'jobs' }
]
})
Vue.component('header-box', require('../components/Header.vue'));
Vue.component('footer-box', require('../components/Footer.vue'));
Vue.component('article-list', require('../components/ArticleList.vue'));
Vue.component('product-list', require('../components/ProductList.vue'));
Vue.component('page-show', require('../components/PageShow.vue'));
new Vue({
el: '#app',
router,
});通过路由注册和变量传递，我们就可以在vue组件中使用this.$route.params获取参数
渲染模板
找到view下面的aritcle/index.blade.php
渲染模板需要绑定容器，即el代表的#app
<div id="app">
<header>
<header-box></header-box>
</header>
<div>
<article-list></article-list>
</div>
<footer>
<footer-box></footer-box>
</footer>
</div>
<script src="/js/application.js"></script>