Laravel5.6 + Vue2+ + Element 环境搭建

新建 Laravel5.6 项目

composer create-project --prefer-dist laravel/laravel Larvuent laravue // 新项目名为

Larvuent 安装完成后

进入项目根目录 cd Larvuent

npm install /cnpm install // 速度慢的请自行切换淘宝镜像 cnpm

3.修改 Laravel 路由

修改 routes/web.php 文件为

Route::get('/', function () {
return view('index');
});

4.新建 Hello.vue 文件

在 resources/assets/js/components 目录下新建 Hello.vue 文件

<template>
    <div>
        <h1>Hello, Larvue!</h1>
        <p class="hello">{{ msg }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'This is a Laravel with Vue and Element '
        }
    }
}
</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)
});

6.新建 Laravel 视图文件，和 Vue 交互

在 resources/views 目录下新建 index.blade.php 文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Larvue</title>
</head>
<body>
    <div id="app"></div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

7.编译前端组件，运行

执行以下命令，编译前端资源

npm run dev

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';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);

9.修改 Hello.vue 文件，使用 Element 组件

修改 resources/assets/js/components/Hello.vue 文件为

<template>
    <div>
        <h1>Hello, Larvue!</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

CSRF 防护

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>Larvue</title>
</head>
<body>
    <div id="app"></div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

安装 vue-router

执行命令，安装 vue-router

npm install vue-router --save-dev

配置 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))
        }
    ]
});

引入 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)
});

重新编译

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 runtime
public/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

使用下面的命令，可以监视前端资源的改变，并自动编译。

npm run watch