1.Laravel5.4 + vue2.0 + vue-router + Element2.3 的搭建（2018.05.06）

1.请先安装 Composer：

windows下安装软件请见附件【Composer-Setup.zip】，解压安装即可。 查看是否安装成功：

composer --version

2.安装 Laravel：

通过 Composer 的 create-project 命令来安装 Laravel 应用，blog 为项目名称：

composer create-project --prefer-dist laravel/laravel blog

注意：详细说明请看 Laravel5.4 文档。建议配置虚拟主机。

3.文件配置：

在根目录下有个 package.json 文件，配置内容如下(自动生成的文件中有很多包依赖没有，如果想使用 Element  ，请先修改成下面配置，也可以后期逐个安装依赖包)：

{   "private": true,   "scripts": {     "dev": "npm run development",     "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",     "watch-poll": "npm run watch -- --watch-poll",     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",     "prod": "npm run production",     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"   },   "devDependencies": {     "axios": "^0.16.2",     "bootstrap-sass": "^3.3.7",     "cross-env": "^5.0.1",     "element-ui": "^2.3.7",     "jquery": "^3.1.1",     "laravel-mix": "^1.0",     "lodash": "^4.17.4",     "vue": "^2.1.10",     "vue-router": "^2.4.0",     "qs": "^6.5.2"   } }

注：请使用在线json检测工具确保该json格式正确。红色是原项目所带依赖包，其他是我们添加的依赖包。

4.安装相关依赖 ，进入到项目目录执行：

cnpm install

注：请自行安装 npm ，速度慢的请自行切换淘宝镜像 cnpm ，建议使用 cnpm。可以参考我的 Vue 笔记。

5.引入 Vue Router:

构建大型项目时，使用 Vue Router 将是一个好的方式，它可以帮助你更好的组织代码，优化路由。

1). 在 resources/assets/js 目录下新建目录 router ，同时在 router 目录下新建 index.js 文件，内容如下：

import Vue from 'vue' import VueRouter from 'vue-router'  Vue.use(VueRouter) //加入需要渲染的页面 import Home from '../components/Home' import Index from '../components/Index' import Bar from '../components/Bar' import Foo from '../components/Foo' import Role from '../components/Role' import Not_Found from '../components/Not_Found' Vue.use(VueRouter); const routes=[     {         path: '/',         component: Home,         children:[                 {                 path: '/',                 name: 'index',                 component: Index             },             {                 path: 'index',                 name: 'goindex',                 redirect: '/'             },             {                 path: 'bar',                 name: 'bar',                 component: Bar             },             {                 path: 'foo',                 name: 'foo',                 component: Foo,             },             {                 path: 'role',                 name: 'rolw',                 component: Role,             },             {                 path: '404',                 name: '404',                   component: Not_Found             },             {                 path: '*',                 name: 'to404',                   redirect: '/404'             },         ]     },     {           path: '*',           name: 'go404',           redirect: '/404'     } ]; const router = new VueRouter({     routes: routes,     // mode: 'history' }); router.push('/index');  //一进入就跳到该路由 export default router

注：具体组件下面将一一介绍。

2).设置顶级路由出口：

在 resources/assets/js 下新建 App.vue 文件，内容如下：

6.配置Vue主文件：

修改 resources/assets/js/app.js 文件，引入路由、axios 和 Element 等组件:

/**  * 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'); window.Vue = require('vue'); /**  * 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 router from './router' import Axios from "axios" import qs from 'qs'  import ElementUI from 'element-ui'   import 'element-ui/lib/theme-chalk/index.css'   Vue.prototype.$axios = Axios Vue.use(ElementUI)   const app = new Vue({       el: '#app',       router,       render: h => h(App)   });

注：app.js 是构建 Vue 项目的主文件，最后所有组件都会被引入到该文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，因为有了 window.Vue = require('vue'); 这句话，就不再需要使用 import Vue from 'vue'  重复导入 Vue 了。

7.新建组件：（ 在 resources/assets/js/components 目录或者子目录下新建各个组件）

1). Header.vue

选项1-Bar             选项2-Foo             选项3-User                            选项4               选项1               选项2               选项3                                   消息中心           订单管理                        {{name}}             退出                                    #user{     float : right;     margin-right: 93px;    }

说明：该组件是为了使用 Element 导航栏。

2). Home.vue

说明：该组件是 Header 组件里路由的出口。

3). Bar.vue

.el-carousel__item:nth-child(2n) {     background-color: #99a9bf;     text-align: center;   }   .el-carousel__item:nth-child(2n+1) {     background-color: #d3dce6;     text-align: center;   }

说明：该组件是为了使用 Element 图片轮询展示。使用到的图片放在： public/images/myimg 下。

4). Index.vue

@size-change="handleSizeChange"         @current-change="handleCurrentChange"         :current-page="currentPage"         :page-sizes="[10, 20, 50, 100]"         :page-size="pagesize"         layout="total, sizes, prev, pager, next, jumper"         :total="total">                 title="提示"       :visible.sync="dialogVisible"       width="30%"       :before-close="handleClose" >       日期：{{ gridData.date }}       姓名：{{ gridData.name }}       省份：{{ gridData.province }}       市区：{{ gridData.city }}       地址：{{ gridData.address }}       邮编：{{ gridData.zip }}                取 消         确 定

说明：该组件是为了使用 Element 表格。里面涉及访问后台数据，后台逻辑后面介绍。

5). Role.vue

.block{     height: 500px; }

说明：该组件是为了使用 Element 时间范围选取。

6). Foo.vue

说明：该组件是为了使用 Element 标签页切换。里面用到上面 Index、Bar、Role 三个组件。

7). Not_Found.vue

.notfound{   width:100%;   overflow: hidden;   background-size:cover; } .c404{   width:100%; }

注：该组件使用到一张图片文件为： public/images/myimg/404.jpg

8.后台提供数据：

由于 Index.vue 组件使用了后台提供的数据，故我们需要在后台进行处理，以此将 Laravel 跟 Vue 结合起来。

1).在 app 目录下新建 DataFrom.php 文件：

namespace App; class DataFrom  {     public $id;     public $date;     public $name;     public $province;     public $city;     public $address;     public $zip; }

2).在 app\Http\Controllers 下新建 UserController.php 文件：

在控制台使用 artisan 工具生成：

php artisan make:controller UserController

修改代码如下：

namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Pagination\LengthAwarePaginator; use App\DataFrom; class UserController extends Controller {     public function getData(Request $request){         //生成数据并进行分页传给前端         $arr = [];         for($i=1;$i<1002;$i++){             $dataFrom = new DataFrom();             $dataFrom->id = $i;             $dataFrom->date = '2016-05-0'.$i;             $dataFrom->name = '王小虎'.$i;             $dataFrom->province = '上海'.$i;             $dataFrom->city = '普陀区'.$i;             $dataFrom->address = '上海市普陀区金沙江路 1518 弄'.$i;             $dataFrom->zip = '20033'.$i;             $arr[] = $dataFrom;         }          $currentPage = $request->input('currentPage', 1); // 获取页码          $pagesize = $request->input('pagesize', 10); //每页的条数          $offset = ($currentPage * $pagesize) - $pagesize;//计算每页分页的初始位置          $res = new LengthAwarePaginator(array_slice($arr,$offset,$pagesize,true),count($arr),$pagesize,          $currentPage,['path' => $request->url(), 'query' => $request->query()]);         return response()->json($res);     } }

3).在 routes\web.php 文件中配置路由：

/* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () {     return view('welcome');  //主视图 }); Route::get(' /getData ', ' UserController@getData ');

说明：以后如果要添加组件，只需要在 resources/assets/js/components 目录下新建 vue 文件，然后再在 resources/assets/js/router/index.js 文件里引入，并配置路由，然后就可以通过路由访问了。如果组件里面访问了后台数据，则在 app\Http\Controllers 下新建相应的 Controller 文件，并在 routes\web.php 文件配置后台路由即可。

9. 配置 Laravel 主视图（该文件也是Vue主入口文件）：

修改 resources/view/welcome.blade.php 文件：

 

10. 运行：

cnpm run dev

该命令默认会去执行根目录下的 webpack.mix.js，使用 Laravel 提供的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下。

说明：前端编译工具有许多，比如 gulp、webpack 等等，Laravel 也为自己提供了开箱即用的编译工具，比如 Laravel5.3 及更早版本提供基于 gulp 的 Laravel Elixir 和从 Laravel5.4 开始提供基于 webpack 的 Laravel Mix，当然你也可以不使用官方提供的工具，自己去配置编译工具。这些编译工具的作用都是一样的，使用方法也大同小异。

11. 热部署运行（开发过程中建议使用该方式）：

npm run watch

注：如遇到跨域问题，请修改 resources/assets/js/bootstrap.js 文件。

12.CSRF token not found 错误：

环境搭建完成后，访问项目，打开开发者模式，切换到 Console ，会看到报  CSRF token not found: 错误。

Laravel 为了避免应用遭到跨站请求伪造攻击(CSRF)，自动为每一个有效用户会话生成一个 CSRF 令牌，该令牌用于验证授权用户和发起请求者是否是同一个人。

如遇到该错误，请修改 welcome.blade.php 文件，增加下面代码（前面其实已经加上了）：

13.代码拆分优化：

代码拆分是将一些不经常变动的代码提取出来，以避免每次都要重新编译，如果你频繁更新应用的 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 runtime
public/js/vendor.js	vendor 库
public/js/app.js	应用代码

修改主入口文件    resources/view/welcome.blade.php ：

注：全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时注意引入三个 js 文件的顺序，以避免出错。

说明：我们在前面使用 assets 函数，此处却改为 mix 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的。 

重新执行命令，就可以了：

npm run watch

14.总结：

到目前为止，项目搭建完毕。前端编译工具使用基于 webpack 的 Laravel Mix，一般情况下，它可以满足大部分的需求，当然你也可以完全抛弃 Laravel Mix，配置自己的 webpack。如果前端需要其他 Vue 插件，直接安装引入即可。

15.本文全部代码，可以到 github 上获取：

https://github.com/EighthRoute520/blog.git