1.新建 Laravel5.5 项目
在 Web 做事器目录下，利用 Composer 建立laravel新项目
composer create-project --prefer-dist laravel/laravel Larvuent // 新项目名为 Larvuent
Larvuent 安装完成后，实行
cd Larvuent //进入项目目录
2.安装前端依赖库
进入 Larvuent 项目后，实行
npm install // 速率慢的请自行切换淘宝镜像 cnpm(百度搜索 'npm淘宝镜像' )
3.在web.php路由文件中,修正途由
Route::get('/', function () { return view('index');});
4.新建 Hello.vue 文件
在 resources/assets/js/components 目录下新建 Hello.vue 文件
<template> <div> <h1>Hello, Larvuent!</h1> <p class="hello">{{ msg }}</p> </div></template><script>export default { data() { return { msg: 'This is a Laravel with Vue and Element Demo.' } }}</script><style>.hello { font-size: 2em; color: green;}</style>
5.修正 app.js 文件，渲染组件
修正 resources/assets/js/app.js 文件
require('./bootstrap');window.Vue = require('vue');// Vue.component('example', require('./components/Example.vue')); // 注释掉import Hello from './components/Hello.vue'; // 引入Hello 组件const app = new Vue({ el: '#app', render: h => h(Hello)});
解释：app.js 是构建 Vue 项目的主文件，末了所有的组件都会被引入到这个文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，由于有了 window.Vue = require(‘vue’) 这句话，就不再须要利用 import Vue from ‘vue’ 重复导入 Vue 了。
6.新建 Laravel 视图文件，和 Vue 交互
在 resources/views 目录下新建 index.blade.php 文件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Larvuent</title> </head> <body> <div id="app"> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
解释：你可能在其他教程中看到有的在利用 assets 函数，这两个函数的紧张差异便是 assets 函数会直策应用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新干系的，如果现在还不明白，不要紧，你记得利用 mix 函数就好了，然后连续今后看。
7.编译前端组件，运行
实行以下命令，编译前端资源
npm run dev
该命令默认会去实行根目录下的 webpack.mix.js 文件，利用 Laravel 供应的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下。
解释：前端编译工具有许多，比如 gulp、webpack 等等，Laravel 也为自己供应了开箱即用的编译工具，比如 Laravel5.3 及更早版本供应基于 gulp 的 Laravel Elixir 和从 Laravel5.4 开始供应基于 webpack 的 Laravel Mix，当然你也可以不该用官方供应的工具，自己去配置编译工具。这些编译工具的浸染都是一样的，利用方法也大同小异。前面说过，本文第一次安装只管即便大略，能运行即可，以是不再去配置前端编译工具，利用官方供应的即可。
访问项目
到目前为止，Laravel + Vue 已经完成了，下面开始引入 Element。
8.引入 Element
实行命令，安装 ElementUI
npm i element-ui -S
修正 resources/assets/js/app.js 文件
import Hello from './components/Hello.vue'; // 引入Hello 组件import ElementUI from 'element-ui'; //这里已经直接引入所有的Element,个中的方法都可以直接额拿过来利用,不用再去单独加载import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
9.修正 Hello.vue 文件，利用 Element 组件
修正 resources/assets/js/components/Hello.vue 文件为
<template> <div> <h1>Hello, Larvuent!</h1> <el-button @click="visible = true">按钮</el-button> <el-dialog v-model="visible"> <p>欢迎利用 Element</p> </el-dialog> </div></template><script>export default { data() { return { visible: false } }}</script><style>.hello { font-size: 2em; color: green;}</style>
10.再次编译前端资源，运行
npm run dev
访问项目，点击按钮
好了，到目前为止，Laravel5.5 + Vue2 + Element 的环境搭建已经完成了，为了方便理解，第一次的搭建过程只管即便简洁。本文下面的部分将利用 Vue 路由等等，逐步完善，便于后期的开拓。
完善 CSRF 防护
环境搭建完成后，访问项目，打开开拓者模式，切换到 Console ，会看到以下报错
Laravel 为了避免运用遭到跨站要求假造攻击(CSRF)，自动为每一个有效用户会话天生一个 CSRF 令牌，该令牌用于验证授权用户和发起要求者是否是同一个人。
修正 resources/views/index.blade.php 文件为
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Larvuent</title></head><body> <div id="app"></div> <script src="{{ mix('js/app.js') }}"></script></body></html>
注:创建一个 meta 标签并将令牌保存到该 meta 标签中，问题可办理。
利用 Vue Router
构建大型项目时，利用 Vue Router 将是一个好的办法，它可以帮助你更好的组织代码，优化路由。
1.安装 vue-router
实行命令，安装 vue-router
npm install vue-router --save-dev
2.配置 vue-router
在 resources/assets/js 目录下新建目录 router ，同时在 router 目录下新建 index.js 文件
import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);export default new VueRouter({ saveScrollPosition: true, routes: [ { name: 'hello', path: '/hello', component: resolve => void(require(['../components/Hello.vue'], resolve)) } ] });
3.引入 vue-router
在 resources/assets/js 目录下新建 App.vue 文件
<template> <div> <h1>Hello, {{ msg }}!</h1> <router-view></router-view> <!--路由引入的组件将在这里被渲染--> </div></template><script>export default { data() { return { msg: 'Vue' } }}</script><style></style>
修正 resources/assets/js/app.js 文件为
// import Hello from './components/Hello.vue';import App from './App.vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-default/index.css';Vue.use(ElementUI);import router from './router/index.js'; const app = new Vue({ el: '#app', router, render: h => h(App) //将Vue的App.vue文件挂载到index.blade.php的id='app' 的文件中});
4.重新编译
npm run dev
通过路由访问 hello 组件
往后如果要添加组件，只需在 resources/assets/js/components 目录下新建 vue 文件，在 resources/assets/js/router/index.js 文件里引入，然后就可以通过路由访问了。
代码拆分
代码拆分是将一些不常常变动的代码提取出来，以避免每次都要重新编译，如果你频繁更新运用的 JavaScript，须要考虑对 vendor 库进行提取和拆分，这样的话，一次修正运用代码不会影响 vendor.js 文件的缓存。
Laravel Mix 的 extract 方法可以实现这样的功能：
修正项目根目录下的 webpack.mix.js 文件
mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .extract(['vue','axios']);
extract 方法吸收包含所有库的数组或你想要提取到 vendor.js 文件的模块，利用上述代码作为示例，Mix 将会天生如下文件:
public/js/manifest.js // Webpack manifest runtimepublic/js/vendor.js // vendor 库public/js/app.js // 运用代码
同时修正 resources/views/index.blade.php 文件为
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Larvuent</title></head><body> <div id="app"></div> <script src="{{ mix('js/manifest.js') }}"> </script> <script src="{{ mix('js/vendor.js') }}"></script> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时也要把稳引入三个 js 文件的顺序，以避免出错。
重新实行命令，就可以了。
npm run dev
总结
到目前为止，这篇文章也快写完了，为了便于理解，第一次搭建时，只管即便大略，能运行即可，成功之后，再添加其它功能。前端编译工具利用基于 webpack 的 Laravel Mix，一样平常情形下，它可以知足大部分的需求，当然你也可以完备抛弃 Laravel Mix，配置自己的 webpack。
