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. mui-选项卡+scroll滚动

    详细操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  2. CSP应用开发-CryptAPI函数库介绍

    基本加密函数为开发加密应用程序提供了足够灵活的空间.所有CSP的通讯都是通过这些函数.一个CSP是实现所有加密操作的独立模块.在每一个应用程序中至少需要提供一个CSP来完成所需的加密操作.如果使用多于 ...

  3. lnmp 1.5 mysql数据库开启远程访问

    LNMP默认是禁止远程连接数据库的,但是有时候为了方便,我们想要远程,下面是开启远程的方法 sudo su # 切换为root用户模式,省的接下来操作的时候出现权限问题 mysql -u root - ...

  4. java 数组复制

    http://www.cnblogs.com/zhengbin/p/5671403.html http://www.cnblogs.com/jjdcxy/p/5870524.html Java数组拷贝 ...

  5. 20 常用模块 hashlib hmac:加密 xml xlrd xlwt:excel读|写 configparser subprocess

    hashlib模块:加密 加密: 1.有解密的加密方式 2.无解密的加密方式:碰撞检查 hashlib -- 1)不同数据加密后的结果一定不一致 -- 2)相同数据的加密结果一定是一致的 import ...

  6. Flask开发微电影网站(九)

    1.后台管理之电影管理 1.1 电影管理之所有电影收藏列表 1.1.1 电影管理之电影收藏列表视图函数 在admin目录下的views.py文件中定义电影收藏列表视图函数 电影收藏列表视图函数需要被登 ...

  7. 03-django模型(1)

    一.内容回顾 1.路由层 a.简单使用 b.有名分组 c.路由分发 d.反向解析 2.视图层 a.HttpRequest对象 常用的属性 常用方法 b.HttpResponse对象 响应三剑客 3.模 ...

  8. hdu4507 数位dp+推公式

    推公式的能力需要锻炼.. /* dp的时候要存结构体 里面三个元素: cnt,就是满足条件的个数 sum1,就是满足条件的数字和 sum2,满足条件的数字平方和 推导过程:还是用记忆化搜索模板 dp[ ...

  9. SQL反模式学习笔记7 多态关联

    目标:引用多个父表 反模式:使用多用途外键.这种设计也叫做多态关联,或者杂乱关联. 多态关联和EAV有着相似的特征:元数据对象的名字是存储在字符串中的. 在多态关联中,父表的名字是存储在Issue_T ...

  10. UOJ#36. 【清华集训2014】玛里苟斯 线性基

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ36.html 题解 按照 $k$ 分类讨论: k=1 : 我们考虑每一位的贡献.若有至少一个数第 $i$ ...