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. 函数语法：JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度（转载）

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  2. Centos-6服务器源配置（使用阿里云的源镜像）

    首先在VM中安装从 https://mirrors.aliyun.com/centos/ 中下载好的centos镜像(这里以centos6.9 64 为例). 安装完成后先要进行备份  mv /etc ...

  3. 【洛谷P2660烤鸡】

    题目背景 猪猪hanke得到了一只鸡 题目描述 猪猪Hanke特别喜欢吃烤鸡(本是同畜牲,相煎何太急!)Hanke吃鸡很特别,为什么特别呢?因为他有10种配料(芥末.孜然等),每种配料可以放1—3克, ...

  4. 论文笔记：Deep feature learning with relative distance comparison for person re-identification

    这篇论文是要解决 person re-identification 的问题.所谓 person re-identification,指的是在不同的场景下识别同一个人(如下图所示).这里的难点是,由于不 ...

  5. excel生成数据地图

    在数据分析过程中,图表是一个十分重要的部分,通过图表可以清晰明了的说明一些数字特征.在众多数据分析图表中,数据地图是常用的一中分析图.在一般的数据分析中,excel已经可以满足绝大部分功能.在本文中, ...

  6. Beta 冲刺（4/7）

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(4/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...

  7. mysql 动态sql的拼接以及执行、分页

    1:建立存储过程,标记参数: ),),)) BEGIN DECLARE start integer; )*limitz; set @sql = 'select * from dsos_vot_drug ...

  8. 【转载】MySQL5.7 添加用户、删除用户与授权

    mysql -uroot -proot MySQL5.7 mysql.user表没有password字段改 authentication_string: 一. 创建用户: 命令:CREATE USER ...

  9. java入门写的第一个代码《HelloWorld》

    public class HelloWorld {public static void main(String[] args){System.out.println("HelloWorld! ...

  10. 20165314 [第二届构建之法论坛] 预培训心得(Java版)

    安装IDEA配置JDKsourcepath啥的之前已经弄好了 克隆项目 emmm这次的代码托管部分好像比之前做的要简单,之前还要git config啥的,还有就是git clone不会提示要输入账号密 ...