Laravel+Vue开发环境搭建

最近开始学习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
2
cd blog
php artisan serve

启动本地开发服务器,默认是8000端口,访问localhost:8000127.0.0.1:8000

安装Vue

package.json中自带的有vue和bootstrap-sass等的配置,首先需要去安装它

1
2
npm install
npm install vue-router –save-dev

配置Vue

/resources/assets/js下新建Vue的挂载点App.vue

1
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
14
require('./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
9
import 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
3
Route::get('/', function () {
return view('idnex');
});

webpack.mix.js中修改

1
2
3
mix.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访问

文章目录
  1. 1. 安装Laravel
  2. 2. 安装Vue
  3. 3. 配置Vue
|