laravel5.4+vue+element简单搭建的示例代码

下面详细讲解如何搭建“laravel5.4+vue+element简单搭建的示例代码”，并提供两个示例说明。

准备工作

安装composer
安装laravel5.4
安装npm
安装vue
安装element-ui

搭建步骤

1. 初始化Laravel项目

使用如下命令初始化一个laravel项目：

composer create-project --prefer-dist laravel/laravel your_project_name "5.4.*"

2. 安装Vue.js

使用如下命令安装Vue.js：

npm install vue

3. 安装Element-ui

使用如下命令安装Element-ui：

npm i element-ui -S

4. 配置webpack.mix.js

在Laravel项目根目录下的 webpack.mix.js 文件中加入以下代码，以编译Vue组件：

mix.js('resources/assets/js/components/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

5. 创建Vue组件

在Laravel项目的 resources/assets/js/components 目录下创建一个名为 app.vue 的Vue组件，并在其中编写Vue组件代码。

示例1 - app.vue：

<template>
  <div>
    <el-input placeholder="请输入内容" v-model="message"></el-input>
    {{ message }}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: ''
      }
    }
  }
</script>

示例2 - app.vue：

<template>
  <div>
    <el-button type="primary" @click="onClick">点击我</el-button>
    <p v-if="flag">Hello World</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        flag: false
      }
    },
    methods: {
      onClick() {
        this.flag = true
      }
    }
  }
</script>

6. 创建路由

在 routes/web.php 文件中创建一个路由，指向Vue组件所在的文件。

示例1 - routes/web.php：

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

示例2 - routes/web.php：

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

7. 创建视图

在 resources/views 目录下创建一个名为 app.blade.php 的视图文件，用于渲染Vue组件。

示例1 - resources/views/app.blade.php：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
    <app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

示例2 - resources/views/button.blade.php：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
    <button></button>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

8. 配置路由

在 routes/web.php 文件中配置路由，指向视图文件。