TODO：搭建Laravel VueJS SemanticUI

TODO：搭建Laravel VueJS SemanticUI

Laravel是一套簡潔、優雅的PHP開發框架(PHP Web Framework)。可讓你從麪條同樣雜亂的代碼中解脫出來；它能夠幫你構建一個完美的網絡APP，並且每行代碼均可以簡潔、富於表達力。

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

SematicUI 是徹底語義化的前端界面開發框架，跟 Bootstrap 和 Foundation 比起來，仍是有些不一樣的，在功能特性上、佈局設計上、用戶體驗上均存在不少差別。易於學習和使用，對於社區貢獻來講是比較開放的。有一個很是好的按鈕實現，情態動詞，和進度條。在許多功能上使用圖標字體。

1. 建立Laravel項目

composer create-project laravel/laravel 項目名稱，網速有點慢要小等

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

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

4. 依賴與nodejs的環境，安裝這些工具都很便捷。Laravel自動gulp構建工具的配置文件，執行安裝好gulp，便可使用gulp進行構建項目，很是方便。

5. 訪問出現

查看日誌

拷貝.env文件從新執行php artisan key:generate生成APP_KEY

6. 默認laravel已經自帶集成vuejs

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

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

執行gulp自動構建編譯代碼

啓動服務訪問首頁便可看到example組件

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

在首頁也引入semantic.css

訪問後的效果如圖

到此一個簡單的Laravel+VueJS+Semantic-UI的集成開發環境搭建成功了，有興趣的朋友能夠試試

wxgzh：ludong86