TODO：搭建Laravel VueJS SemanticUI

TODO：搭建Laravel VueJS SemanticUI

Laravel是一套簡潔、優(yōu)雅的PHP開發(fā)框架(PHP Web Framework)。可以讓你從面條一樣雜亂的代碼中解脫出來；它可以幫你構(gòu)建一個完美的網(wǎng)絡APP，而且每行代碼都可以簡潔、富于表達力。

VueJS是一款漸進式JavaScript框架，有著易用，靈活，高效的有點。簡單小巧的核心，漸進式技術(shù)棧，足以應付任何規(guī)模的應用。

SematicUI 是完全語義化的前端界面開發(fā)框架，跟 Bootstrap 和 Foundation 比起來，還是有些不同的，在功能特性上、布局設計上、用戶體驗上均存在很多差異。易于學習和使用，對于社區(qū)貢獻來說是比較開放的。有一個非常好的按鈕實現(xiàn)，情態(tài)動詞，和進度條。在許多功能上使用圖標字體。

1. 創(chuàng)建Laravel項目

composer create-project laravel/laravel 項目名稱，網(wǎng)速有點慢要小等

2. 運行npm install安裝nodejs對應的包

3. 配置bower，bower是啥？Bower是一個客戶端技術(shù)的軟件包管理器，它可用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網(wǎng)絡資源。在這里主要用于管理html5shiv，semantic。需要添加兩個配置bower.json管理要用的js包，還有一個配置文件.bowerrc用于管理生成的文件夾路徑。安裝方法很簡單npm直接可以安裝（npm install bower）；項目安裝bower配置的網(wǎng)絡資源，則運行bower install。

4. 依賴與nodejs的環(huán)境，安裝這些工具都很便捷。Laravel自動gulp構(gòu)建工具的配置文件，執(zhí)行安裝好gulp，即可使用gulp進行構(gòu)建項目，非常方便。

5. 訪問出現(xiàn)

查看日志

拷貝.env文件重新執(zhí)行php artisan key:generate生成APP_KEY

6. 默認laravel已經(jīng)自帶集成vuejs

接下來把這個Example顯示在頁面上

在welcome.blade.php加入以下代碼

執(zhí)行g(shù)ulp自動構(gòu)建編譯代碼

啟動服務訪問首頁即可看到example組件

7. 引入semantic-ui，在Example.vue加入semantic對應的class

在首頁也引入semantic.css

訪問后的效果如圖

到此一個簡單的Laravel+VueJS+Semantic-UI的集成開發(fā)環(huán)境搭建成功了，有興趣的朋友可以試試

wxgzh：ludong86