Laravel5.7+vue+element-ui 配置及简单使用
8962 / 17 / 创建于 5年前
leienshu 的个人博客
安装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都不能少哦，代码放在这个里面就行了。
然后运行：
cnpm run dev再打开浏览器，你将看到以下界面：
注意用Chrome浏览器怎么刷新都不变，这个时候你要用Shift+刷新才管用！
总结
虽然看起来不难，但是对于没有任何前端基础的人来说，这个坑还需要趟很久吧！
先这样吧，最基础的就是这个教程了，代码我继续传到Github上，自己看吧！
另外：细心的朋友肯定发现了下面的图片：
这个问题就大家自己解决吧！
我的博客：https://leijingwei.com
代码：https://github.com/leienshu/Nested-Set
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：