然后我们就要做内页了,
基于laravel的模板,我们建立各个页面
layout
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,minmum-scale=1,maxmum-scale=1,user-scalable=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel-@yield('title')</title>
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/') }}css/fontawesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/') }}css/front.css" />
</head>
<body>
<div class="app" id="app">
<header-box></header-box>
<router-view></router-view>
<footer-box></footer-box>
</div>
<script src="{{ URL::asset('/') }}js/application.js"></script>
</body>
</html>
其他内容页面我们只需要继承模板就可以了
如articles/index.blade.php
@extends('layout.default')
@section('title', '首页')
首先在components文件夹下建立Articles.vue和ArticleItem.vue
ArticleItem用于文章列表,抽离出来也许其他地方可以用得到
同时可能还有其它页面,如侧边栏,分页,面包屑导航等,都可以抽离出来放在components下
Articles.vue
<template>
<div class="container main">
<div class="row">
<sidebar></sidebar>
<div class="col-lg-9 col-md-9 main-content">
<contentMenu></contentMenu>
<div class="articles-list">
<articleItem :articles="results"></articleItem>
</div>
<pagination></pagination>
</div>
</div>
</div>
</template>
<script>
import sidebar from './Sidebar'
import contentMenu from './ContentMenu'
import pagination from './Pagination'
import articleItem from './ArticleItem'
export default {
name: 'articles',
data () {
return {
results: ''
}
},
mounted() {
var that = this
var page = this.$route.params.page
axios.get('/api/articles/' + page)
.then(r => r.data)
.then(response => {
that.results = response.data
})
},
components : {
'sidebar': sidebar,
'contentMenu': contentMenu,
'pagination': pagination,
'articleItem': articleItem
}
}
</script>
ArticleItem.vue
<template>
<ul>
<li v-for="article in articles" :key="article.id" class="row" >
<div class="col-sm-3 img">
<a href="#"><img :src="'../uploads/'+article.image" /></a>
</div>
<div class="col-sm-9 info">
<a href="#">{{ article.title }}</a>
<p><i class="fa fa-clock-o"></i> 2018-08-28</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['articles']
}
</script>
这里需要注意的是父组件向子组件传值
<articleItem :articles="results"></articleItem>
子组件接收数据
export default {
props: ['articles']
}
以及获取router参数
this.$route.params
然后再application.js中引入Articles.vue
import articles from '../components/Article'
建立vue-router路由
import products from '../components/Product'
import articles from '../components/Article'
import pictures from '../components/Picture'
// 路由
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/' },
{ path: '/pages/:category?', name: "pages" },
{ path: '/products/:category?', name: 'products', component: products },
{ path: '/product/:id', name: 'product' },
{ path: '/articles/:category?', name: 'articles', component: articles },
{ path: '/article/:id', name: 'article' },
{ path: '/pictures/:category?', name: 'pictures', component: pictures },
{ path: '/pictrue/:id', name: 'case' }
]
})
差不多就这些了,由于只作学习用,首页和分页没做,之前抽离ArticleItem.vue,也是因为首页也用到了,完整的Application.js
require('../bootstrap')
window.Vue = require('vue')
import VueRouter from 'vue-router'
import Vuex from 'vuex'
Vue.use(VueRouter)
Vue.use(Vuex)
/**
* 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.
*/
import products from '../components/Product'
import articles from '../components/Article'
import pictures from '../components/Picture'
// 路由
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/' },
{ path: '/pages/:category?', name: "pages" },
{ path: '/products/:category?', name: 'products', component: products },
{ path: '/product/:id', name: 'product' },
{ path: '/articles/:category?', name: 'articles', component: articles },
{ path: '/article/:id', name: 'article' },
{ path: '/pictures/:category?', name: 'pictures', component: pictures },
{ path: '/pictrue/:id', name: 'case' }
]
})
const state = {
categories: '',
productTree: '',
config: ''
}
const mutations = {
SET_CATEGORIES(state, categories){
state.categories = categories
},
SET_CONFIG(state, config){
state.config = config
},
SET_PRODUCT_TREE(state, productTree){
state.productTree = productTree
}
}
const actions = {
loadInit ({ commit }) {
axios.get('/api/initweb')
.then(r => r.data)
.then(coins => {
commit('SET_CONFIG', coins.data.config)
commit('SET_CATEGORIES', coins.data.categories)
commit('SET_PRODUCT_TREE', coins.data.product_tree)
})
}
}
const store = new Vuex.Store({
state: state,
mutations: mutations,
actions: actions
})
Vue.component('header-box', require('../components/Header.vue'))
Vue.component('footer-box', require('../components/Footer.vue'))
new Vue({
router,
store
}).$mount('#app')
项目地址: