1,安装 laravel
composer create-project --prefer-dist laravel/laravel laravel-spa
2, 安装前端依赖包
npm install
3,安装完之后,为了便于开发,使用热更新模式,在 webpack.mix.js 中添加配置
mix.browserSync({
proxy: ‘localhost:8000’
});
4, 先执行 php artisan serve
,在执行 ‘npm run watch’
(可能npm run watch 会让你安装yarn add browser-sync [email protected] --dev --production=false)
5, 到这里我们准备工作已经完毕,正式接下来开发Vue的单页应用,在开发单页应用中,对应Route Api Vuex Components这些,下面我们就来定义这些。
在首先首页引入对应的app.css状语从句:app.js文件。
resource/vies/welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="@{{ csrf_token }}">
<title>Laravel & Vue</title>
<link rel="stylesheet" type="text/css" href="/css/app.css">
</head>
<body>
<div id="app">
<nav class="navbar navbar-inverse">
<div class=" container">
<div class="navbar-header">
<a class="navbar-brand" href="/">LaravelVue</a>
</div>
</div>
</nav>
<div class="container main">
<router-view />
</div>
</div>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
6,配置启动app.js
应用对应的入口文件是app.js,所以在这个入口文件中,我们实例化 Vue实例,初始化和加载所需的组件。
# resource/js/app.js
require('./bootstrap');
window.Vue = require('vue');
import Hello from './components/Home.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes'; // 路由配置文件
// 实例化路由
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router,
render: h => h(Hello)
});
路由
前端页面主要有3个路由,如下
# resource/js/routes.js
export default[
{ path: '', redirect: '/index' },
{ path: '/index', component: require('./components/Home.vue') },
];