您好,登錄后才能下訂單哦!
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
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。