安裝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 協議》，轉載必須註明作者和本文連結