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. java和数据库中日期类型的常见用法

    (1)java中日期类型:Date.Timestamp(2)数据库中:Date.Timestamp(3)字符串和Date之间的格式化转换:    SimpleDateFormat类方法: format ...

  2. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

  3. 【easy】349. Intersection of Two Arrays

    找两个数组的交集(不要多想,考虑啥序列之类的,就是简单的两堆数求交集啊!!!最后去个重就好了) //LeetCode里用到很多现成函数的时候,苦手だな- //这个题的思路是,先sort,把两个vect ...

  4. 安装anaconda和python3.7环境

    安装anaconda和python3.7 安装matplotlib报错(参考https://github.com/conda/conda/issues/6007)# 设置源为清华conda confi ...

  5. 关于linux中的 秘钥认证 ,最清晰解读

    所谓"公钥登录",原理很简单,就是用户将自己的公钥储存在远程主机上.登录的时候,远程主机会向用户发送一段随机字符串,用户用自己的私钥加密后,再发回来.远程主机用事先储存的公钥进行解 ...

  6. 【原创】Linux基础之SSH隧道/端口转发

    格式 ssh -L <local port>:<remote host>:<remote port> <SSH servername> 示例 # ssh ...

  7. 【原创】大叔问题定位分享(21)spark执行insert overwrite非常慢,比hive还要慢

    最近把一些sql执行从hive改到spark,发现执行更慢,sql主要是一些insert overwrite操作,从执行计划看到,用到InsertIntoHiveTable spark-sql> ...

  8. 再见,Python!你好,Go语言

    Go 语言诞生于谷歌,由计算机领域的三位宗师级大牛 Rob Pike.Ken Thompson 和 Robert Griesemer 写成.由于出身名门,Go 在诞生之初就吸引了大批开发者的关注.诞生 ...

  9. 新建的亚马逊云服务器EC2 ping 不通 解决方案

    在EC2配置安全组里面新加一条规则

  10. SpringBoot 多数据源分布式事务

    1.pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...