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. 更改 Ubuntu默认Python版本的问题

    一般Ubuntu默认版本为2.x,之前运行一些程序,将默认版本修改为3.5,现在想修改为2.7. 之前的方法有些忘记,现在重新记录一下: 1.查看你系统中有哪些Python的二进制文件可供使用, ls ...

  2. mysql的表映射

    参考博客:https://blog.csdn.net/shushugood/article/details/79925150 1.服务器上的操作 在服务器上mysql创建一个实例,名为test_db, ...

  3. vector 的用法--------------自绘资源

    创建 命名 选择根元素 当然你也可以选择其他元素 属性介绍vector 元素 name:定义该矢量图形的名字.通过名字找到这个矢量图width,height:定义该矢量图形的固有宽高(必须的,矢量图内 ...

  4. openwrt MT7628 编译前更改为DHCP，root 密码、ssid、时区、主机名

    一.设置为DHCP动态获取ip地址 在:/home/OpenWrt/openwrt_CC_mt76xx_zhuotk_source/ 目录下,新建文件名/files/etc/config. 将配置好的 ...

  5. hdu3709 数位dp

    枚举fix所在的位置loc即可,然后数位dp即可 这题要注意一种特殊情况,就是所有位都是0的时候对于每个fix都是成立的 /* dp[i][j][k]表示前i位确定了平衡点在第j位,前i位和为k fi ...

  6. ffmpeg学习目录收集

    ffmpeg工具参数中文详细解释 雷霄骅 - [总结]FFMPEG视音频编解码零基础学习方法

  7. 经测试，foreach循环比linq的效率高

  8. Spring设置定时任务时，关于执行时间的规则设置

    been需要在xml文件中进行配置 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE bean ...

  9. IDEA手动创建JFinal项目

    http://www.jfinal.com/share/674 https://www.oschina.net/question/265150_110300

  10. 在SOUI中使用线性布局

    SOUI 2.5.1.1开始支持线性布局(LinearLayout). 要在SOUI布局中使用线性布局, 需要在布局容器窗口里指定布局类型为vbox | hbox, (vbox为垂直线性布局, hbo ...