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

安装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 就会看到如下界面：
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

vue-laravel vue vue-component

本作品采用《CC 协议》，转载必须注明作者和本文链接

求知若饥，虚心若愚！

本帖由系统于 6年前自动加精

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

讨论数量: 17

DonSen

课程读者 20 声望

5.7版本 Mac下需要执行

yarn add vue-template-compiler --dev --production=false
不然打包出错

7年前评论

yuzhewo

新版碰到这个问题，但是程序自动安装了，但是新版貌似没有默认引用vue，需要手动安装vue

leienshu

课程读者 171 声望

@DonSen 我就是mac啊，我好像没遇到过这个问题呢？

@leienshu 不晓得编译会报错应该是依赖没有安装完整

maliao

28 声望 / 全栈 @ 中信信用卡中心

错了，ctrl+F5 才是清缓存

@maliao 没错的，我的macbook是带touchbar的，chrome刷新必须按住Shift点击地址栏旁边的刷新按钮。你说的Control + F5 应该是F5键直接显示的吧，我这个默认Fn键显示的是功能键，F5不直接显示，要按F5还要同时按住Fn键盘。我试过了不行。

Shuyi

193 声望 / Software Developer @ Gubagoo

如果有 artisan preset vue-elementui 就更完美了，哈哈哈，可能会有哟 :wink:

6年前评论

任书梓

github 上面就有,需要composer 一个插件

Ίκαρος

378 声望 / 架构师 @ 北京纬业信息科技有限公司

@leienshu mac系统，鼠标放到刷新按钮上，“右键”就会弹出一个菜单，有强制硬性刷新缓存XXXX之类的，点那个也行。

@leienshu 另外直接使用 npm run watch ,就会自动监控代码变化自动刷新页面了

1164880236

11 声望

file
为什么用mix会找不到路径？
之后用asset模板引入成功。

@1164880236 这个问题你看下stackoverflow上面的解答，我觉得对你有帮助。
https://stackoverflow.com/questions/509269...

Fgloomy

课程读者 5 声望

已经能成功使用element-ui了，但编译后 js 由 1M多直接变成 3M，导致加载缓慢，请问要如何配置

kinyou

课程读者 106 声望 / PHP全栈工程师 @ ABC

我大概看了laravel前端框架的前端框架实现的原理, 我写了一个包,你可以访问如下地址进行安装
https://github.com/maogou/swappreset

然后执行 php artisan swap:preset element 就可以切换到element-ui为laravel的前端框架

file

北北

请问你的一个example-component组件如何动态传数据和绑定方法？blade里面的数据传给example-component，以及example-component的数据传给blade模板文件

@思悟使用按需引入，不需要完整引入。

@北北这个建议你看下VUE教程，万变不离其宗。

mamahaha

课程读者 4 声望

即使是按需引用，js也是太肥大了，elementui有啥异步引用的案例吗？

只加载一次，大点影响不大，生成模式打包应该还会压缩体积的。

elesos

22 声望 / C语言&后端PHP+Python项目人员 @ github.com/starRTC

谢谢分享。对新手很有帮助！！！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

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

安装laravel5.7框架

安装npm包

安装并引入element-ui

安装element-ui

先来测试下Vue组件

引入element-ui

总结

5.7版本 Mac下需要执行

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

安装laravel5.7框架

安装npm包

安装并引入element-ui

安装element-ui

先来测试下Vue组件

引入element-ui

总结

5.7版本 Mac下需要执行

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录