laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

如今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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小白安全

Invoke-PSImage:将PS脚本隐藏进PNG像素中并用一行指令去执行它

Invoke-PSImage Invoke-PSImage可以将一个PowerShell脚本中的字节嵌入到PNG图像文件的像素之中,并生成一行执行命令来...

30190
来自专栏landv

C#_FindWindow

24340
来自专栏跟着阿笨一起玩NET

NuGet 无法连接到远程服务器-解决方法

安装EF4.3的步骤是首先安装VS扩展 NuGet,然后再使用NuGet安装EF程序包

61830
来自专栏Python小屋

PAGE:像Visual Studio一样设计Python GUI窗体

虽然使用标准库tkinter开发Python GUI程序很方便,也提供了强大的功能,但是窗体上的一切都需要程序员使用代码来控制,在页面布局上浪费大量时间,确实不...

64040
来自专栏技术小黑屋

实时预览Markdown利器

使用MBP15寸有点高不成低不就,接显示器分辨率下降(浪费Retina屏),不接显示器屏幕不是很大。

43430
来自专栏跟着阿笨一起玩NET

Win7系统中必需记住的14个常用快捷键

在使用电脑时,多多少少地都会用到一些快捷键,尤其是在玩游戏,或使用一些软件时。快捷键不仅方便,如果用的好,甚至可以大大提升我们的工作效率。而且,快捷键不仅可以在...

9910
来自专栏散尽浮华

confluence上传文件附件预览乱码问题(linux服务器安装字体操作)

在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于...

38420
来自专栏Objective-C

iOS-运行程序屏幕上下有黑边

52190
来自专栏Jerry的SAP技术分享

如何将UI5应用部署到Fiori On-Premise和On-Cloud的Launchpad上去

具体步骤参考我的博客: 如何将BSP应用配置成Fiori Launchpad上的一个tile

45160
来自专栏张善友的专栏

VsDoc for jQuery

Microsoft 现在完全支持 jQuery 并将它集成在ASP.NET MVC 框架。jQuery-vsdoc.js文件,该文件对串连的jQuery sel...

21590

扫码关注云+社区

领取腾讯云代金券