laravel5.7+vue+element-ui配置及简单使用

最新推荐文章于 2025-01-03 15:02:03 发布

原创最新推荐文章于 2025-01-03 15:02:03 发布 · 792 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Laravel5.7框架中配置和使用Vue与Element-UI，包括安装步骤、组件测试、路由设置等关键环节。

安装laravel5.7框架

打开终端，输入以下命令

composer create-project laravel/laravel element-ui

这里因为我在上一篇文章中已经新建了一个Nested Set项目，所以我就不再新建了，直接拿来用，有不明白的参考上一篇文章！

安装npm包

cnpm install    //我一般用cnpm，这个是淘宝镜像，国内速度快

安装好后，多出来了一个node_modules文件夹如下图：

到这里，其实就可以直接运行项目了，命令：

cnpm run dev

完成后生成了一些编译后的css和js文件，结果如下：

安装并引入element-ui

安装element-ui

cnpm i element-ui -S

先来测试下Vue组件

打开reresources/js/components目录，我们会看到lavavel自带的一个.vue后缀的example文件：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

再继续打开reresources/js/app.js文件观察代码，发现已经引入了example-component组件：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app'
});

注意：上面的组件名叫example-component

我们直接新建一个页面来测试下组件吧：

新建「路由-控制器-视图」如下：

//修改web.php，增加一行：
Route::get('/hello','HelloController@index');

创建控制器HelloController.php文件:

php artisan make:controller HelloController

控制器中定义一个index方法，返回视图：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HelloController extends Controller
{
    public function index()
    {
        return view('hello');
    }
}

创建视图hello.blade.php文件，位于resources/views/目录下，随便写一段简单的代码：：

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <title>Laravel Vue Element-Ui</title>
</head>
<body>
<div id="app">

    <example-component></example-component>

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

上面增加的两行代码就是引入组件用的：

<example-component></example-component>
<script src="{{ mix('js/app.js') }}"></script>

这个时候，你访问 http://nestedset.test/hello 就会看到如下界面：

这说明，你的模板引入成功了。

引入element-ui

现在我们修改resources/js/app.js文件如下：

require('./bootstrap');

window.Vue = require('vue');

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app'
});

上面的三行代码就是引入element-ui的，下面我们只要宿便复制一些element-ui组件的代码，放到ExampleComponent.vue文件中就行了，代码如下：

<template>
<div>
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</template>

注意上面的template和div都不能少哦，代码放在这个里面就行了。
然后运行：