laravel整合vue 多入口解決
阿新 • • 發佈：2018-08-11
ref 入口 fig ogl 源文件 前臺 one depend uniq
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); }
其中會有很多小問題，需要自己去慢慢解決
laravel整合vue 多入口解決