安装laravel5.7框架

打开终端,输入以下命令

composer create-project laravel/laravel element-ui

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

安装npm包

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

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

node_modules

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

cnpm run dev

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

app.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都不能少哦,代码放在这个里面就行了。
然后运行:

cnpm run dev

再打开浏览器,你将看到以下界面:

elemnet-ui

这里有个坑:我用Chrome浏览器怎么刷新都不变,这个时候你要用Shift+刷新才管用!

总结

虽然看起来不难,但是对于没有任何前端基础的人来说,这个坑还需要趟很久吧!
先这样吧,最基础的就是这个教程了,代码我继续传到Github上,自己看吧!
另外:细心的朋友肯定发现了下面的图片:

x-csrf


这个问题就大家自己解决吧!
我的博客:https://leijingwei.com
代码:https://github.com/leienshu/Nested-Set

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

Leave a Reply

Your email address will not be published. Required fields are marked *