laravel整合vue 多入口解決

時間 2019-11-15

標籤 laravel 整合 vue 入口解決简体版

原文原文鏈接

2018年8月10日23:10:29php

其實整合是挺簡單，由於laravel自己就準備的挺好了css

laravel 版本5.6 注意php cli是web是不同的這個須要設置環境變量，php須要7.1以上html

composer create-project --prefer-dist laravel/laravel shop 5.6.*vue

建立項目node

根目錄 package.jsonjquery

加上你須要的插件webpack

{
  "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

查看最新的組件的版本ios

cnpm installlaravel

這個須要經常使用組件，請注意 laravel-mix 裏面的裏面的組件版本最好和根目錄的package.json一致，否則會出現不少問題web

注意：這個是處理多個入口的問題，由於不少業務不只是前臺，後臺，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);
}

其中會有不少小問題，須要本身去慢慢解決

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。