laravel5.7+Vue+ Element 环境搭建

在环境搭建的前提是已经在本地搭建好了laravel框架,并且安装npm.

image.png

1.安装前端依赖库

npm install 

2.添加laravel路由

• 修改 routes/web.php 文件为

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

3.新建 Hello.vue 文件

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

4.修改 app.js 文件，渲染组件

• 修改 resources/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 了。*

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

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

说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的，如果现在还不明白，不要紧，你记得使用 mix 函数就好了，然后继续往后看。

6.编译前端组件，运行

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

npm run dev

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

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

7,访问项目

image.png

到目前为止，Laravel + Vue 已经完成了，下面开始引入 Element .

8.引入 Element

• 执行命令，安装 ElementUI

npm i element-ui -S

9.修改 resources/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);

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

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

10.再次编译前端资源，运行

npm run dev 

11.访问

image.png

好了，到目前为止，Laravel5.5 + Vue2 + Element 的环境搭建已经完成了，为了方便理解，第一次的搭建过程尽量简洁。本文下面的部分将使用 Vue 路由等等，逐步完善，便于后期的开发。

12.CSRF 防护

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

修改 resources/views/index.blade.php 文件为

创建一个 meta 标签并将令牌保存到该 meta 标签中，问题可解决。

13.使用 Vue Router

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

13.1 安装 vue-router

• 执行命令，安装 vue-router

npm install vue-router --save-dev

13.2配置 vue-router

• 在 resources/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))
        }
    ]
});

13.3.引入 vue-router

• 在 resources/js 目录下新建 App.vue 文件

• 修改 resources/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)
});

13.4.重新编译

npm run dev

• 通过路由访问 hello 组件