如今laravel来到5.4版本,更方便引入vue了,具体步骤如下:

下图为我动到的文件

1.下载laravel5.4

2.命令行(laravel5.4目录下):composer install

3.新建.env文件,把.env.example里的内容复制到.env文件中

4.生成key,命令行:PHP artisan key:generate

5.配置文件package.json,内容如下:

{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"css-loader": "^0.25.0",
"element-ui": "^1.1.1",
"gulp": "^3.9.1",
"handsontable": "0.27.0",
"laravel-elixir": "^6.0.0-15",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.10",
"style-loader": "^0.13.1",
"vue": "^2.1.4",
"vue-loader": "^10.0.0",
"vue-resource": "^1.0.3",
"vue-router": "^2.1.1",
"vue-template-compiler": "^2.1.4",
"axios": "^0.15.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^0.5.0",
"lodash": "^4.16.2"
},
"dependencies": {}
}<span style="font-size:18px;">
</span>

6.命令行(没有npm的自行下载):npm install

7.resources/assets/js下新建App.vue文件,内容如下:

<template>
<div id="app">
<router-view></router-view>
</div>
</template>

8.resources/assets/js/app.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');
/**
* 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.
*/
import App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(VueRouter)
Vue.use(ElementUI)

const router = new VueRouter({
routes: [
{ path: '/', component: require('./components/Example.vue') }
]
})

const app = new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});<span style="font-size:18px;">
</span>

9.把resources/view/welcome.blade.php改为:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<div id="app"></div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

10.在主目录下新建gulpfile.js文件,内容:

const elixir = require('laravel-elixir');
const path = require('path');

require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/

elixir(mix => {
// Elixir.webpack.config.module.loaders = [];

Elixir.webpack.mergeConfig({
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
}
]
}
});

mix.sass('app.scss')
.webpack('app.js')
});

11.命令行(没有gulp,自行下载):gulp watch

关于laravel中使用gulp Elixir编辑前端资源也可以参考:https://onlyke.com/html/665.html   及  https://docs.golaravel.com/docs/5.0/elixir/

本文章转载自http://blog.csdn.net/sangjinchao/article/details/60596614

在laravel5.4中有一个更简单的方法,是使用Mix,配置详情请参照 http://laravelacademy.org/post/6798.html

laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)的更多相关文章

  1. 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS

    介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...

  2. 前端小菜鸡使用Vue+Element笔记(一)

    关于使用Vue+Element的项目简介~ 最近因为项目组缺前端人员,所以自己现学现做页面,先把前后台功能调通 觉得前端可真的是不容易呀哎呀~ 首先记录一下相关的Vue入门的教程: vue环境搭建示例 ...

  3. Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例

    导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目. 安装 Element 安装依赖 Element 是国内饿 ...

  4. Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  5. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  6. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  7. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  8. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  9. VUE + ElementUI 从搭建到运行

    版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 前言:本文简洁的描述VUE + ElementUI 从搭建到运行,可以根据本文先搭建出可运行的项目,然后再详细回顾每个步骤所做的事: ...

随机推荐

  1. 异常处理汇总 ~ 修正果带着你的Code飞奔吧!

    异常处理汇总-运维系列 http://www.cnblogs.com/dunitian/p/4522983.html 异常处理汇总-开发工具  http://www.cnblogs.com/dunit ...

  2. 03、操作RDD(transformation和action案例实战)

    1.transformation和action介绍 Spark支持两种RDD操作:transformation和action.transformation操作会针对已有的RDD创建一个新的RDD:而a ...

  3. 转: ffmpeg循环推流方法

    from:  https://blog.csdn.net/weiyuefei/article/details/64125208 ffmpeg循环推流方法 You should be able to u ...

  4. mac双系统下ubuntu卡在开机密码登录界面卡死

    背景:开机黑屏卡在,dev/sda1: clean, 552599/6111232 files, 7119295/24414464 blocks,修复完这个问题之后,出现桌面卡死,光标鼠标键盘全部失灵 ...

  5. Vue.js父与子组件之间传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  6. Win10系统的SurfacePro4的启动菜单太多怎么管理,UEFI的启动菜单如何编辑

    有时候多增加了一些硬盘版的PE,会出现下面这种问题,启动项目太多又删不掉(如果你硬盘版的PE修改了文件位置,这个选项还进不去)   关机之后,按开机键和音量+,进入Surface的启动菜单,直接删除原 ...

  7. HTML语言字符编码

    ! ! — 惊叹号Exclamation mark ” " " 双引号Quotation mark # # — 数字标志Number sign $ $ — 美元标志Dollar s ...

  8. TensorFlow实战Google深度学习框架10-12章学习笔记

    目录 第10章 TensorFlow高层封装 第11章 TensorBoard可视化 第12章 TensorFlow计算加速 第10章 TensorFlow高层封装 目前比较流行的TensorFlow ...

  9. VirtualBox虚拟机磁盘瘦身

    操作系统 : windows7_x64 VirtualBox 版本 : 4.3.28 原理: 使用0填充虚拟系统磁盘,然后删除填充文件,再使用VBoxManage进行压缩. Linux系统磁盘瘦身 一 ...

  10. Guava future

    减少主函数的等待时间,使得多任务能够异步非阻塞执行 ListenableFuture是可以监听的Future,它是对java原生Future的扩展增强.Future表示一个异步计算任务,当任务完成时可 ...