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. GMM与EM共舞

    GMM,即高斯混合模型(Gaussian Mixture Model),简单地讲,就是将多个高斯模型混合起来,作为一个新的模型,这样就可以综合运用多模型的表达能力.EM,指的是均值最大化算法(expe ...

  2. 逆元知识普及(进阶篇) ——from Judge

    关于一些逆元知识的拓展 刚艹完一道 提高- 的黄题(曹冲养猪) ,于是又来混一波讲解了 ——承接上文扫盲篇   四.Lucas定理(求大组合数取模)   题外话 这里Lucas定理的证明需要用到很多关 ...

  3. 【easy】110. Balanced Binary Tree判断二叉树是否平衡

    判断二叉树是否平衡 a height-balanced binary tree is defined as a binary tree in which the depth of the two su ...

  4. bootstrap 解决弹出窗口(modal) 常见问题

    无法使用键盘esc关闭窗口方法: 首先在modal容器的div中增加属性tabindex="-1",其次设置键盘ESC属性keyboard为true: 方法1:使用js打开窗口时 ...

  5. sass进阶—函数

    /*内置函数*/ /*1)常规的rgb,rgba函数*/$color:rgb(255,255,162);body{ color: $color; background-color:rgba($colo ...

  6. java开发学生信息管理系统的实现（简洁易懂），适合计算机专业学生参考，课程设计、毕业论文设计参考等

    编写一个简单的学生管理信息系统. 在oracle中设计一张学生表,以学号作为关键字. 其他学生信息有:姓名.手机号. 在进入系统时,显示如下菜单: ************************** ...

  7. 有标号的DAG计数I~IV

    题解: https://www.cnblogs.com/zhoushuyu/p/10077241.html 看到这么一篇,发现挺不错的..

  8. Xshell 连接 vmware中的CentOS 7

    参考内容:             Xshell 连接 CentOS 7 与 Ubuntu Server,http://www.linuxidc.com/Linux/2017-03/141333.ht ...

  9. react-native清除android项目缓存的命令

    cd到android目录下执行: ./gradlew clean

  10. MyCat-简介

    一MyCat简介 java编写的数据库中间件 Mycat运行环境需要JDK. Mycat是中间件.运行在代码应用和MySQL数据库之间的应用. 前身 : corba. 是阿里开发的数据库中间件.实现M ...