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

 

如需转载请注明出处:https://www.cnblogs.com/zhuchenglin/p/6751566.html

posted @ 2017-04-23 08:45  lin_zone  阅读(4219)  评论(1编辑  收藏