2018年8月10日23:10:29
其实整合是挺简单，因为laravel本身就准备的挺好了
laravel 版本5.6 注意php cli是web是不一样的 这个需要设置环境变量 ，php需要7.1以上
composer create-project --prefer-dist laravel/laravel shop 5.6.*
创建项目
根目录 package.json
加上你需要的插件
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.17",
"element-ui": "^2.4.6",
"vue-loader": "^13.7.1",
"vue-router": "^3.0.1",
"vux": "^2.9.2",
"vux-loader": "^1.2.9"
},
"dependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.17",
"element-ui": "^2.4.6",
"vue-loader": "^13.7.1",
"vue-router": "^3.0.1",
"vux": "^2.9.2",
"vux-loader": "^1.2.9"
}
}npm view element-ui version
npm view vue-loader version
npm view vue-router version
npm view vuex version
npm view vux-loader version
查看最新的组件的版本
cnpm install
这个需要常用组件，请注意 laravel-mix 里面的里面的组件版本最好和根目录的package.json一致，不然会出现很多问题
注意： 这个是处理多个入口的问题，因为很多业务不仅是前台，后台，h5版 ，论坛等需要vue，需要多入口
router加入路由
Route::get('/', function () {
return view('index');
});
Route::get('/admin', function () {
return view('admin/index');
});2个入口
index.php
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="X-CSRF-TOKEN" content="{{csrf_token()}}">
<title>index</title>
</head> <body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body> </html>
admin.php
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="X-CSRF-TOKEN" content="{{csrf_token()}}">
<title>admin</title>
</head> <body>
<div id="app">
<example></example>
</div> <script src="{{ mix('js/admin.js') }}"></script>
</body> </html>
打包文件 webpack.mix.js加入新资源文件
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.js('resources/assets/js/admin.js', 'public/js')
.sass('resources/assets/sass/admin.scss', 'public/css');吧目录下的文件文件复制一份
admin.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/ require('./bootstrap'); window.Vue = require('vue');
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
/**
* 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.
*/ Vue.component('example', require('./components/Example.vue')); const app = new Vue({
el: '#app'
});
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
加入 element ui 注意可能根据npm的版本不同 这个css路径会不同
注意 theme-chalk 这个主题，在 element-ui 里面具体的名称
admin.scss
// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600"); // Variables
@import "variables"; // Bootstrap
@import '~bootstrap/scss/bootstrap'; .navbar-laravel {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
其中会有很多小问题，需要自己去慢慢解决