TODO:搭建Laravel VueJS SemanticUI
Laravel是一套簡(jiǎn)潔、優(yōu)雅的PHP開發(fā)框架(PHP Web Framework)互妓∠希可以讓你從面條一樣雜亂的代碼中解脫出來坤塞;它可以幫你構(gòu)建一個(gè)完美的網(wǎng)絡(luò)APP冯勉,而且每行代碼都可以簡(jiǎn)潔、富于表達(dá)力摹芙。
VueJS是一款漸進(jìn)式JavaScript框架灼狰,有著易用,靈活浮禾,高效的有點(diǎn)交胚。簡(jiǎn)單小巧的核心,漸進(jìn)式技術(shù)棧盈电,足以應(yīng)付任何規(guī)模的應(yīng)用蝴簇。
SematicUI 是完全語(yǔ)義化的前端界面開發(fā)框架,跟 Bootstrap 和 Foundation 比起來匆帚,還是有些不同的熬词,在功能特性上、布局設(shè)計(jì)上吸重、用戶體驗(yàn)上均存在很多差異互拾。易于學(xué)習(xí)和使用,對(duì)于社區(qū)貢獻(xiàn)來說是比較開放的嚎幸。有一個(gè)非常好的按鈕實(shí)現(xiàn)颜矿,情態(tài)動(dòng)詞,和進(jìn)度條嫉晶。在許多功能上使用圖標(biāo)字體骑疆。
1. 創(chuàng)建Laravel項(xiàng)目
composer create-project laravel/laravel 項(xiàng)目名稱田篇,網(wǎng)速有點(diǎn)慢要小等
2. 運(yùn)行npm install安裝nodejs對(duì)應(yīng)的包
3. 配置bower,bower是啥箍铭?Bower是一個(gè)客戶端技術(shù)的軟件包管理器斯辰,它可用于搜索、安裝和卸載如JavaScript坡疼、HTML彬呻、CSS之類的網(wǎng)絡(luò)資源。在這里主要用于管理html5shiv柄瑰,semantic闸氮。需要添加兩個(gè)配置bower.json管理要用的js包,還有一個(gè)配置文件.bowerrc用于管理生成的文件夾路徑教沾。安裝方法很簡(jiǎn)單npm直接可以安裝(npm install bower)蒲跨;項(xiàng)目安裝bower配置的網(wǎng)絡(luò)資源,則運(yùn)行bower install授翻。
4. 依賴與nodejs的環(huán)境或悲,安裝這些工具都很便捷。Laravel自動(dòng)gulp構(gòu)建工具的配置文件堪唐,執(zhí)行安裝好gulp巡语,即可使用gulp進(jìn)行構(gòu)建項(xiàng)目,非常方便淮菠。
5. 訪問出現(xiàn)
查看日志
拷貝.env文件重新執(zhí)行php artisan key:generate生成APP_KEY
6. 默認(rèn)laravel已經(jīng)自帶集成vuejs
接下來把這個(gè)Example顯示在頁(yè)面上
在welcome.blade.php加入以下代碼
執(zhí)行g(shù)ulp自動(dòng)構(gòu)建編譯代碼
啟動(dòng)服務(wù)訪問首頁(yè)即可看到example組件
7. 引入semantic-ui男公,在Example.vue加入semantic對(duì)應(yīng)的class
在首頁(yè)也引入semantic.css
訪問后的效果如圖
到此一個(gè)簡(jiǎn)單的Laravel+VueJS+Semantic-UI的集成開發(fā)環(huán)境搭建成功了,有興趣的朋友可以試試
wxgzh:ludong86