最近开始学习Laravel的开发，简单的记录一下Laravel集成Vue开发环境的搭建过程。
需要准备
- php > 7.0
- composer
- node > 6.0
- npm > 3.0
安装Laravel
方法参照‘Laravel中文文档’;
执行命令1
composer create-project --prefer-dist laravel/laravel blog //blog为项目名
安装完成之后1
2cd blog
php artisan serve
启动本地开发服务器，默认是8000端口，访问localhost:8000或127.0.0.1:8000
安装Vue
package.json中自带的有vue和bootstrap-sass等的配置，首先需要去安装它1
2npm install
npm install vue-router –save-dev
配置Vue
在/resources/assets/js下新建Vue的挂载点App.vue1
2
3
4
5
6
7
8
9
10
11
12<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default{
}
</script>
修改app.js，与Vue项目中的main.js类似1
2
3
4
5
6
7
8
9
10
11
12
13
14require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './App.vue'
import router from './router'
const app = new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});
新建路由文件，在js文件夹下新建router文件夹，配置路由信息1
2
3
4
5
6
7
8
9import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
//……
]
})
在resources/views目录下添加index.blade.php文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
在resources/routes/web.php中修改路由配置1
2
3Route::get('/', function () {
return view('idnex');
});
在webpack.mix.js中修改1
2
3mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue', "vue-router", "axios"])
.sass('resources/assets/sass/app.scss', 'public/css');
配置完成后执行npm run watch即可，配置服务器指向public/index.php访问