Laravel5.4+自身集成Vue2初体验

Laravel 本身对前端开发就提供了很多支持，5.3 更是直接引入了 Vue 这个目前最流行的轻量级前端框架,这篇文章使用一个简单的例子说明一下怎么在laravel中直接使用vue，从而让让前端开发和后端无缝。

首先声明: 在测试这个5.4版本的时候遇到过很多坑，将集中在这一篇文章中说明

[Laravel5.4+自身集成Vue2初体验–续]laravel5.4的laravel-mix踩坑记

1.新建Laravel5.4项目，安装依赖包，配置虚拟主机

我这里下载laravel包直接是在网页下的，当然你也可以使用Compose来下载新建项目

composer create-project --prefer-dist laravel/laravel Laravel54 // 新项目名为 Laravel54
cd Laravel54 //切换项目目录
npm install // 速度慢的请自行切换淘宝镜像 cnpm安装

安装完前端依赖之后目录大致如下:

配置虚拟主机这里不作过多介绍，入口目录为public

2.修改路由文件，新建hello.vue组件

修改 routes/web.php 文件为:

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

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

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello World'
        }
    }
}
</script>

3.修改 app.js 文件，渲染组件，新建 Laravel 视图文件，加入vue组件

//Vue.component('example', require('./components/Example.vue'));//注释掉原来的默认组件
Vue.component('hello', require('./components/Hello.vue'));//引入hello组件

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="app">
    <!--这里加入hello组件-->
    <hello></hello>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

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

4.编译运行

npm run dev

转载请注明：Li Jianwei's Blog » Laravel5.4+自身集成Vue2初体验