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 多入口解决的更多相关文章

  1. webpack整合 .vue 文件,集成 vue-loader

    webpack集成vue-loader 创建一个文件夹 test_webpack_vue 在 test_webpack_vue 下新建目录 src 在 src 目录下 新建文件 index.html ...

  2. 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

    什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...

  3. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  4. springboot整合vue实现上传下载文件

    https://blog.csdn.net/yhhyhhyhhyhh/article/details/89888953 文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文 ...

  5. 使用Laravel 和 Vue 构建一个简单的SPA

    本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...

  6. 【laravel5.4+vue.js】laravel 循环三维数组，解决：htmlentities() expects parameter 1 to be string, array given

    laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...

  7. VUE开发（一）Spring Boot整合Vue并实现前后端贯穿调用

    文章更新时间:2020/03/14 一.前言 作为一个后端程序员,前端知识多少还是要了解一些的,vue能很好的实现前后端分离,且更便于我们日常中的调试,还具备了轻量.低侵入性的特点,所以我觉得是很有必 ...

  8. 【前端】Vue和Vux开发WebApp日志一、整合vue+cordova和webpack+gulp

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux.html 项目github地址:https://github.com/shamoyuu/vue-vu ...

  9. laravel整合workerman做聊天室

    测试工具  http://www.blue-zero.com/WebSocket/ 2018年8月6日17:28:24 <?php namespace App\Console\Commands; ...

随机推荐

  1. Choreographer解析

    Choreographer_舞蹈编导 为什么叫舞蹈编导,因为舞蹈是由节奏的,节奏是每个点位动作的快慢控制,跳舞时节奏很重要,编舞者控制节奏.视图刷新也是如此,不是说你想刷就能刷,一切要按照底层信号要求 ...

  2. ansible入门及组件介绍

    Ansible简介 Ansible是自动化运维的工具,基于Python开发,实现了批量系统配置.批量程序部署.批量运行命令等功能.Ansible是基于模块工作的,ansible提供一个框架,通过模块实 ...

  3. android dialog设置全屏半透明背景色

    style代码如下: <style name="theme_dialog" parent="@android:style/Theme.Dialog"> ...

  4. find xargs 简单组合使用

    简单总结下,留作自己以后拾遗...... 一.find xargs 简单组合 ## mv 小结find ./ -type f -name "*.sh"|xargs mv -t /o ...

  5. 第一周——数据分析之表示 —— Numpy入门

    数据的维度 从一个数据到一组数据 一个数据:表达一个含义 一组数据:表达一个或者多个含义 维度:一组数据的组织形式 一维数据 由对等关系的有序或者无序数据构成,采用线性方式组织,对应列表.数组和集合等 ...

  6. WPF 10天修炼 第一天- 入门

    简介 WPF技术基于DirectX,完美的整合了矢量图形.2D或3D绘图技术.文件及多媒体技术.WPF将开发人员和设计人员的职责清楚的分离,提供了一种声明编程语言XAML.同时Expression B ...

  7. vue-cli 3.0

    安装 vue-cli 3.0 时报错 vue-cli3安装遇到的问题,卸载不掉旧版本,导致更新不了 vue-cli 2.9.6 版本卸载不了 作者:Runner_leaf链接:https://www. ...

  8. html基础技巧：点击、placeholder、文本、字体、清楚浮动

    点击处理: 消除a标签点击后的边框,颜色(background:#fff) 1:a:focus{outline:none;} button去除边框 1:border:none 2:border:0px ...

  9. python第九天（9-33）

    一:进程 进程概念 进程就是一个程序运行在一个数据集上的一次动态执行过程 进程一般由程序,数据集,进程控制块组成 进程控制块: 进程控制块用来记录进程的外部特征,描述进程的执行变化过程,系统可以利用它 ...

  10. [原创]基于Zynq Linux环境搭建(二)

    在此篇,我们编译UBOOT 解压: [#17#17:26:56 FPGADeveloper@ubuntu ~/Zybo_Demo]$tar zxvf *.tar.gz 在解压过程中出现下述问题 tar ...