款功能強(qiáng)大的 admin 框架,很多復(fù)雜的業(yè)務(wù)組件、頁面模板都有,專業(yè)程度堪比付費(fèi)的產(chǎn)品。
SCUI Admin 是一個中后臺管理系統(tǒng)的前端解決方案,俗稱 admin ui 框架,用于讓開發(fā)者搭建業(yè)務(wù)管理后臺,基于當(dāng)前最新的 Vue3 和 Element Plus 實(shí)現(xiàn)。和一些包含后端開發(fā)的 admin 項(xiàng)目不一樣,SCUI Admin 是一個純前端的解決方案,無論后端使用什么語言開發(fā),都沒有限制。
SCUI admin 官網(wǎng)首頁
SCUI Admin 封裝了很多常用的業(yè)務(wù)組件,使用起來很簡單,一切從簡也是 SCUI 所追求的目標(biāo)。
讓一切復(fù)雜的東西傻瓜化。
SCUI的宗旨
作為一個使用 Element UI 開發(fā) admin 后臺多年的前端仔,得益于 Element 提供的專業(yè)優(yōu)質(zhì)的基礎(chǔ)組件,在實(shí)現(xiàn)業(yè)務(wù)需求的過程中雖然十分順利,但 Element 只提供了基礎(chǔ)組件,復(fù)雜操作的業(yè)務(wù)需求,仍然需要自己去寫。
登錄頁
SCUI Admin 的最大特色是提供了很多專業(yè)的復(fù)雜組件和頁面模板,在開始使用前,我強(qiáng)烈建議各位先從官方的演示地址體驗(yàn)這套系統(tǒng),相信會和我有一樣的感受。
很多 admin 系統(tǒng)都過度簡潔,實(shí)際上 admin 最核心的是功能強(qiáng)大和高效,管理者使用起來事半功倍,比如 SCUI Admin 的導(dǎo)航菜單是多列式的,相比于折疊式的菜單,使用起來更直觀。從上到下面包屑導(dǎo)航、多頁面管理標(biāo)簽以及菜單隱藏、主題切換等基本功能都做得很好。
SCUI admin 控制臺
SCUI Admin 提供了很多復(fù)雜功能的業(yè)務(wù)組件,比如
SCUI admin 表格選擇器
SCUI admin 表單表格
還有太多實(shí)用的組件了,這些組件自己實(shí)現(xiàn)起來,不僅開發(fā)成本大,而且很有可能是 shi 一般的體驗(yàn)。
由于是純前端的項(xiàng)目,看目錄結(jié)構(gòu)就基本可以上手了。
┌── public # 靜態(tài)資源(不會被Webpack打包)
├── src # 源代碼
│ ├── api # 接口
│ ├── assets # 靜態(tài)資源(會被打包)
│ ├── components # 組件庫
│ ├── config # 配置
│ ├── directives # 自定義指令
│ ├── layout # 框架布局視圖
│ ├── locales # 國際化文本
│ ├── router # 路由表
│ ├── store # VUEX狀態(tài)管理
│ ├── style # 全局樣式
│ ├── utils # 全局公用方法
│ ├── views # 所有視圖
│ ├── App.vue # 入口視圖
│ └── main.js # 入口文件
├── .editorconfig # 統(tǒng)一編輯器樣式
├── babel.config.js # postcss 配置
├── package.json # 包管理
└── vue.config.js # vue-cli 配置
# 克隆項(xiàng)目
git clone https://gitee.com/lolicode/scui.git
# 進(jìn)入項(xiàng)目目錄
cd scui
# 安裝依賴
npm i
# 啟動項(xiàng)目(開發(fā)模式)
npm run serve
啟動完成后瀏覽器訪問 http://localhost:2800,接下去可以熟悉一下或者進(jìn)行業(yè)務(wù)開發(fā)步驟。官網(wǎng)文檔展示了開發(fā)一個頁面的教程,很簡單:
SCUI Admin 提供了全面的業(yè)務(wù)開發(fā)解決方案,沒有支持樹搖優(yōu)化這種自動優(yōu)化的方式,如果不把沒有用到的功能依賴去掉,打包的體積會很大。 SCUI Admin 采用 Webpack 官方 splitChunks 分割模塊來配置。
依賴分析
在打包完成后,會在 dist 根目錄下生成 report.html,可以查看各個模塊的體積分析,從而決定是否需要抽離。
SCUI Admin 是一個采用 MIT 開源協(xié)議的 web 中后臺管理 UI 框架,基于 Vue3 和 Element Plus 開發(fā),這兩個項(xiàng)目同樣也是免費(fèi)開源的,任何公司和個人都可以免費(fèi)下載使用,也可以用在商業(yè)項(xiàng)目上。
之前分享了很多 admin 框架,SCUI Admin 絕對是眾多免費(fèi) admin 框架的翹楚,從組件的豐富和實(shí)用程度上,完全可以和同類型的付費(fèi)產(chǎn)品相提并論,我的下一個 admin 就選 SCUI Admin 了。
關(guān)注我,持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。
↓↓點(diǎn)擊查看本次分享的網(wǎng)址。
SCUI Admin - 基于 Vue3 和 Element Plus 開發(fā)的 admin 前端 UI 框架,不僅免費(fèi)開源,還有很多現(xiàn)成的業(yè)務(wù)組件、頁面模板|那些免費(fèi)的磚
了尋找一個優(yōu)質(zhì)的網(wǎng)頁模板,網(wǎng)頁設(shè)計(jì)師和開發(fā)者往往可能會花上大半天的時間。不過幸運(yùn)的是,現(xiàn)在的網(wǎng)頁設(shè)計(jì)師和開發(fā)人員已經(jīng)開始共享HTML5,Bootstrap和CSS3中的免費(fèi)網(wǎng)頁模板資源。鑒于網(wǎng)站模板的靈活性和強(qiáng)大的功能,現(xiàn)在廣大設(shè)計(jì)師和開發(fā)者對html5網(wǎng)站的實(shí)際需求日益增長。為了造福大眾,Mockplus的小伙伴整理了2018年最好的免費(fèi)響應(yīng)式HTML5網(wǎng)頁模板供大家學(xué)習(xí)。
為什么HTML5, Bootstrap和CSS3的網(wǎng)頁模板資源如此受歡迎?
1. 作為一種全新的語言,HTML5支持所有瀏覽器兼容的瀏覽器,是創(chuàng)建優(yōu)秀網(wǎng)站的最新標(biāo)記語言。由于HTML5語言的日益普及,所以HTML5網(wǎng)站模板也很受歡迎。
2. CSS3是CSS語言的最新版本,用于提供最佳的樣式網(wǎng)站,如無限的顏色組合,很棒的字體樣式,字體選擇等等。總的來說, CSS3語言使您的網(wǎng)站美麗而時尚。
3. Bootstrap已經(jīng)成為用戶界面開發(fā)人員最喜歡的前端框架之一,其優(yōu)勢在于其開源的可用性。 它自己修改后的書面CSS為UI開發(fā)人員節(jié)省了大量時間。 此外,Bootstrap具有一些創(chuàng)新功能,如移動友好型,SAAS,干凈輕便的代碼,跨瀏覽器兼容性等等,使得大多數(shù)設(shè)計(jì)人員使用此框架可以用較少的時間和精力創(chuàng)建響應(yīng)式網(wǎng)站。
5個最好的免費(fèi)響應(yīng)式HTML5網(wǎng)頁模板 -- 2018
1. Boxus - 軟件公司和網(wǎng)頁設(shè)計(jì)公司的創(chuàng)意網(wǎng)站模板
開發(fā)技術(shù):HTML 5, CSS 3, JS, jQuery
網(wǎng)站特色:
l 創(chuàng)意機(jī)構(gòu)模板
l 粘性的導(dǎo)航條
l 谷歌地圖
l 社交媒體圖標(biāo)
l 色彩斑斕的接口
l 字體圖標(biāo)
l 明亮的配色方案
Boxus是一個充滿創(chuàng)意和活力的免費(fèi)HTML5軟件公司和網(wǎng)頁設(shè)計(jì)公司的創(chuàng)意網(wǎng)站模板。其獨(dú)特的布局以及響應(yīng)速度非常出色。 最重要的是,它提供了最新的JavaScript插件,使模板更加高效和強(qiáng)大。 你要知道,一個具有啟發(fā)性的令人驚嘆的免費(fèi)HTML5網(wǎng)頁模板可以大大減少耗時并提高生產(chǎn)力。
2. AweSplash - 免費(fèi)的HTML閃屏頁面
開發(fā)技術(shù):HTML 5, CSS 3, JS, jQuery
網(wǎng)站特色:
l 滑塊
l 響應(yīng)式視網(wǎng)膜菜單
l 幽靈按鈕
l SEO友好
l 設(shè)備響應(yīng)
l jQuery&Javascript插件
l YouTube和Vimeo Player插件
AweSplash非常適合作為歡迎頁面或任何其他著陸頁來推出新產(chǎn)品或宣布即將舉辦的活動。它的主要吸引力是它的4個不同的演示頁面。幽靈按鈕可讓您鏈接到即將推出的產(chǎn)品。使用名為Animate Headline的Javascript插件,頁面變得更加美觀。在這個免費(fèi)HTML5啟動畫面模板的演示中,你可以看到帶有美麗背景滑動圖像的頁面。
3. Beverages - 餐廳類Bootstrap響應(yīng)式網(wǎng)頁模板
開發(fā)技術(shù):HTML 5, CSS 3, JS, Bootstrap
網(wǎng)站特色:
l 完全響應(yīng)
l 支持自定義
l 使用有效的HTML5和CSS3代碼構(gòu)建
l 使用Google網(wǎng)絡(luò)字體
l Bootstrap框架
Beverages是100%響應(yīng)式餐廳主題網(wǎng)站模板,適用于任何食品和飲料網(wǎng)站的設(shè)計(jì)。兼容所有設(shè)備,顯示在所有屏幕尺寸上。它完全建立在Bootstrap框架中,HTML5,CSS3和JQuery.你可以輕松的將這個模板與任何其他類型的生意相結(jié)合。
4. TravelAir - 旅游觀光HTML網(wǎng)站模板
開發(fā)技術(shù):HTML 5, CSS 3, JS, jQuery
網(wǎng)站特色:
l Bootstrap 4
l HTML5和CSS3
l 粘滯標(biāo)題
l 跨瀏覽器兼容性
l Google字體
TravelAir擁有獨(dú)特而富有創(chuàng)意的主頁設(shè)計(jì),其現(xiàn)代風(fēng)格的設(shè)計(jì)布局。 主頁上有一個帶有標(biāo)題文字的貓頭鷹旋轉(zhuǎn)木馬滑塊。此外,有jQuery UI日歷的旅行預(yù)訂表格。在主頁有旅游套餐,最熱門的目的地和關(guān)于您的公司的部分,讓網(wǎng)站訪問者和專業(yè)外觀的網(wǎng)站印象深刻。
5. Jessica- 營養(yǎng)師網(wǎng)站模板
開發(fā)技術(shù):HTML 5, CSS 3, JS, jQuery
網(wǎng)站特色:
l Bootstrap V3 +
l 極簡設(shè)計(jì)
l HTML5 CSS3
l 谷歌字體(蒙特塞拉特)下載
l 風(fēng)格指南(開發(fā)人員用途和模板設(shè)計(jì)指南)
作為營養(yǎng)師網(wǎng)站模板,Jessica采用了極簡風(fēng)格的網(wǎng)頁設(shè)計(jì),顏色搭配非常美觀,圖片看起來讓人很有食欲。營養(yǎng)網(wǎng)站模板對健康,健身,美體,美食,美容,飲食,減肥教練,女教練,女性飲食等主題都是新鮮而具有吸引力的。
3個最好的免費(fèi)Bootstrap網(wǎng)頁模板 -- 2018
1. Vex - 免費(fèi)Bootstrap 4著陸頁模板
開發(fā)技術(shù):HTML 5, CSS 3, Bootstrap 4 alpha.5, JS, jQuery
網(wǎng)頁特色:
l 視差背景效果
l 電子郵件訂閱選項(xiàng)
l 頁腳菜單
l Bootstrap 4框架
l 友好的用戶界面
Vex由最近發(fā)布的Bootstrap 4 CSS框架構(gòu)建而成,非常靈敏。由于Bootstrap 4為開發(fā)人員和用戶提供了更多的舒適性和靈活性,Vex模板在小屏幕上可以發(fā)揮出色的效果。
2. Conceit - 企業(yè)類Bootstrap響應(yīng)式Web模板
開發(fā)技術(shù):Bootstrap framework, HTML5, CSS3, JQuery
網(wǎng)頁特色:
l 100%響應(yīng)Bootstrap滑塊
l 基于Font Awesome的圖標(biāo)
l HTML5和CSS3
l Google字體
l Bootstrap框架
l 圖像轉(zhuǎn)換效果
Conceit是一個現(xiàn)代主題多頁多用途商業(yè)和企業(yè)相關(guān)高利用率網(wǎng)站模板,支持用戶構(gòu)建自己的創(chuàng)意網(wǎng)站。這個模板提供了很多實(shí)用的頁面包括關(guān)于頁面,聯(lián)系頁面,404頁面,最新博客等。這個模板的設(shè)計(jì)是完全基于Bootstrap框架,HTML5,CSS3和JQuery構(gòu)建的100%響應(yīng)式跨瀏覽器模板。
3. Asentus - 免費(fèi)的響應(yīng)式引導(dǎo)頁HTML5模板
開發(fā)技術(shù):HTML 5, CSS 3, Bootstrap 3, JS, jQuery
網(wǎng)頁特色:
l 粘滯菜單欄
l 滑動標(biāo)題背景
l 幽靈按鈕
l HTML5 / CSS3
如果你想要輕量級,靈活且易于定制,免費(fèi)供商業(yè)和個人使用的企業(yè)代理網(wǎng)站模板; Asentus正是你想要的。這是一個免費(fèi)的自適應(yīng)引導(dǎo)企業(yè)代理機(jī)構(gòu)的HTML5模板。 超級干凈,優(yōu)雅的風(fēng)格。
1. Garage - 免費(fèi)的HTML5 CSS3 Bootstrap響應(yīng)式網(wǎng)頁模板
開發(fā)技術(shù):HTML 5, CSS 3, Bootstrap 3, JS, jQuery
網(wǎng)頁特色:
l 視差效應(yīng)
l W3C有效標(biāo)記
l 平滑過渡效果
l 跨瀏覽器支持
l 100%響應(yīng)式布局
l 100%的搜索引擎友好
Garage是由webdomus開發(fā)團(tuán)隊(duì)開發(fā)的完全特殊的創(chuàng)意模板,特別適用于古董或經(jīng)典汽車展示。這個多頁面的HTML5 CSS3 Bootstrap響應(yīng)模板有相關(guān)章節(jié),可以滿足客戶的需求。
2. Graffiti Artist - 免費(fèi)的涂鴉藝術(shù)類CSS網(wǎng)頁模板
開發(fā)技術(shù):HTML 5, CSS 3,
網(wǎng)站特色:
l 便捷的網(wǎng)頁編輯入口
l 豐富的教程
l 設(shè)計(jì)工具
Graffiti是一個適于涂鴉藝術(shù)家,街頭攝影師和創(chuàng)意專業(yè)人士的CSS網(wǎng)頁模板。藝術(shù)作品和創(chuàng)意項(xiàng)目在模板正面和中心位置展示,非常吸引人。引人注目的黑白媒體以及視差滾動為豐富多彩的獨(dú)特風(fēng)格提供了完美的背景。
總結(jié):
這些免費(fèi)的HTML網(wǎng)站模板對網(wǎng)頁設(shè)計(jì)師和開發(fā)甚至初學(xué)者都很有用,他們不需要花費(fèi)過多的精力就可以自己創(chuàng)建的個人網(wǎng)站。如果你想把握2018年最新最好的免費(fèi)響應(yīng)式HTML5, Bootstrap, CSS網(wǎng)頁設(shè)計(jì),不妨將上面的網(wǎng)頁模板下載下來自己研究,激發(fā)自己的創(chuàng)作靈感。
如果你不會任何開發(fā)語言但也想同樣擁有自己的網(wǎng)站,推薦你借助原型設(shè)計(jì)工具,例如國產(chǎn)的Mockplus快速完成網(wǎng)頁模板設(shè)計(jì)。如果想像這些優(yōu)秀的模板那樣,直接下載套用也是可以的。除軟件內(nèi)置的豐富網(wǎng)頁模板,Mockplus官網(wǎng)上也提供了很多優(yōu)秀的真實(shí)網(wǎng)頁模板。直接下載原文件,在Mockplus桌面端打開即可開始設(shè)計(jì)。只需要通過Mockplus的圖片組件導(dǎo)入自己的圖片和自定義組件,就可以快速的完成一個中低保真的HTML5網(wǎng)頁原型設(shè)計(jì)。
家早上好,今天給大家分享幾個GitHub上一些比較實(shí)用的開源工具,今天稍作整理,簡單跟大家分享一下。
SVG 矢量圖轉(zhuǎn)換
VTracer 是 GitHub 上一款開源工具,可快速將 JPG、PNG 等格式的圖片快速轉(zhuǎn)換為 SVG 矢量圖,并支持過濾斑點(diǎn)、色彩精度、曲線擬合等多種參數(shù)配置。
在線體驗(yàn):https://www.visioncortex.org/vtracer/
GitHub:https://github.com/visioncortex/vtracer
輕量級 Web 繪畫 App
tldraw 是一個輕量級,功能強(qiáng)大的繪畫 App,自帶畫筆、橡皮、線框、文字等工具,用戶可自定義畫筆顏色、線框樣式等。
除了滿足基本繪畫需求之外,該工具還支持創(chuàng)建多人繪畫房間,快捷鍵作畫,以及暗黑主題、創(chuàng)作專注模式、畫布調(diào)試模式、畫布復(fù)制為 SVG / JSON 格式等功能。
Demo:https://www.tldraw.com/
GitHub:https://github.com/tldraw/tldraw
UI 設(shè)計(jì)與原型制作平臺
GitHub 上首個開源的 UI 設(shè)計(jì)與原型制作平臺:Penpot,擁有多款 UI 組件與樣式、交互式原型以及項(xiàng)目設(shè)計(jì)示例與模板,幫你更快完成項(xiàng)目設(shè)計(jì)工作。
此外,該平臺還支持團(tuán)隊(duì)多人實(shí)時協(xié)作編輯,設(shè)計(jì)稿添加注釋等多種團(tuán)隊(duì)協(xié)作工具。
,時長01:56
地址:https://penpot.app/
GitHub:https://github.com/penpot/penpot
私有云文檔在線部署
MrDoc 是一個開源的在線文檔系統(tǒng),適合作為私有云文檔、云筆記和知識管理工具,私有化在線文檔部署方案。
該系統(tǒng)擁有站點(diǎn)管理(注冊登錄、資源管理、站點(diǎn)統(tǒng)計(jì))、文檔管理、內(nèi)容編輯、音視頻內(nèi)容管理、私密文檔分享等功能。
該項(xiàng)目適用于個人云筆記、在線產(chǎn)品手冊、團(tuán)隊(duì)內(nèi)部知識庫、在線電子教程等私有化文檔部署場景。
地址:https://mrdoc.pro/
GitHub:https://github.com/zmister2016/MrDoc
DevOps 開發(fā)工具
GitHub 上一款開源的 DevOps 開發(fā)工具:Dev Lake,可將 DevOps 數(shù)據(jù)以實(shí)用、個性化、可擴(kuò)展的視圖呈現(xiàn),完成數(shù)據(jù)的收集、分析和可視化。
工具內(nèi)置 20+ 效能指標(biāo)與下鉆分析能力,可快速歸集 DevOps 全流程效能數(shù)據(jù),并支持接入新數(shù)據(jù)源,完成自定義 SQL 分析及拖拽搭建場景化數(shù)據(jù)視圖等功能。
項(xiàng)目團(tuán)隊(duì)成員主要來自微軟研究員、加州大學(xué)伯克利分校和斯坦福大學(xué)。
GitHub:https://github.com/merico-dev/lake
零代碼爬蟲平臺
Spider Flow,一個高度靈活可配置的爬蟲平臺,用戶無需編寫代碼,以流程圖的方式,即可實(shí)現(xiàn)爬蟲。
該工具支持多數(shù)據(jù)源、自動保存至數(shù)據(jù)庫、任務(wù)監(jiān)控、抓取 JS 動態(tài)渲染頁面、插件擴(kuò)展(OCR 識別、郵件發(fā)送)等功能。
GitHub:https://github.com/ssssssss-team/spider-flow
原文:https://mp.weixin.qq.com/s/xngXz6n2ODcWBoOnDE_zTA
歡迎點(diǎn)贊+轉(zhuǎn)發(fā)+關(guān)注!大家的支持是我分享最大的動力!!!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。