{ "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": {} }
6.命令行（没有npm的自行下载）：npm install
7.resources/assets/js下新建App.vue文件，内容如下：
<template> <div> <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: 'https://www.jb51.net/', component: require('./components/Example.vue') } ] }) const app = new Vue({ el: '#app', router, template: '<App/>', components: { App } });
9.把resources/view/welcome.blade.php改为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello</title> </head> <body> <div></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
这样就简单的搭建完成了，可以访问了！