當(dāng)前Laravel版本：6.18.3
當(dāng)前Vue版本：2.6.11
確保在此之前已經(jīng)安裝好composer、node，如果需要sass泛源，還要有python運(yùn)行環(huán)境
一、創(chuàng)建Laravel項(xiàng)目：
composer create-project --prefer-dist laravel/laravel demo "6.*"
1忿危、配置package.json中的依賴項(xiàng)：
package.json：
"devDependencies": {
? ? "cross-env": "^7.0",
? ? "laravel-mix": "^5.0.1",
? ? "lodash": "^4.17.13",
? ? "resolve-url-loader": "^3.1.0",
? ? "vue-template-compiler": "^2.6.11"
},
?"dependencies": {
? ? ?"axios": "^0.19.2",
? ? ?"vue": "^2.6.11",
? ? ?"vue-router": "^3.1.6",
? ? ?"vuex": "^3.1.3"
}
2达箍、sass選項(xiàng)
如果不使用sass，先將resources/sass/app.scss改名為resources/css/app.css铺厨，然后設(shè)置webpack.mix.js缎玫，需要sass的飄過本小2：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
? ? .copy('resources/css/*.css', 'public/css');
3、安裝依賴項(xiàng)：
npm install
? ? 如果以后需要sass解滓，再安裝以下依賴項(xiàng)：
npm i -D node-sass fibers sass sass-loader
? ? 注：在安裝node-sass時(shí)會(huì)自動(dòng)從github下載.node文件(此文件依賴python)赃磨，可能會(huì)比較慢，建議更換國(guó)內(nèi)源洼裤。
二邻辉、引入Vue：
1、修改路由
在routers/web.php路由文件中修改路由項(xiàng)腮鞍，定位到index：
Route::get('/', function () {
? ? return view('index');
});
2值骇、新建vue模板文件
新建resources/components/Hello.vue文件：
<template>
<div>
? ? ? ? <h1>Hello, Laravue!</h1>
? ? ? ? <p class="msg">{{ msg }}</p>
? ? </div>
</template><script>
export default {
? ? data() {
? ? ? ? return { msg: 'This is a Laravel 6.x with Vue project.' }
? ? }
}
</script><style>
h1 { text-align: center; }
.msg { font-size: 16px; color: green; text-align: center; }
</style>
3、創(chuàng)建Vue實(shí)例并渲染
在resources/js/app.js文件中創(chuàng)建Vue實(shí)例移国，引入模板文件并渲染：
require('./bootstrap');
window.Vue = require('vue');import Hello from '../components/Hello';
const app = new Vue({
? ? el: '#app',
? ? render: h => h(Hello)
});
4吱瘩、新建blade視圖文件關(guān)聯(lián)vue
<!doctype html>
<html lang="zh-CN">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport"
? ? ? ? ? content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <meta name="csrf-token" content="{{ csrf_token() }}">
? ? <title>Laravue</title>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
5、打包運(yùn)行
npm run dev
npm run watch
看到這樣就算是成功將啦迹缀！
