1. 前端開發框架有哪些
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美,直觀並且給力的web設計工具包,可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件,柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的,主要包括四部分的內容:
腳手架——全局樣式,響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此,如果你的設計需要實現響應式布局,那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素,比如表格(table),表單(form),按鈕(button),以及圖片(image),基礎CSS為這些要素提供了優雅,一致的多種樣式。
組件——收集了大量可以重用的組件,如下拉菜單(dropdowns),按鈕組(button groups),導航面板(navigation control)——包括:tabs,pills,lists標簽,麵包屑導航(breadcrumbs)以及頁碼(pagination),縮略圖(thumbnails),進度條(progress bars),媒體對象(media objects)等等。
JavaScript——包括一系列jQuery的插件,這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口(modals),提示效果(tool tips),「泡芙」效果(popovers),滾動監控(scrollspy),旋轉木馬(carousel),輸入提示(typeahead),等等。
Bootstrap已經足夠強大,能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發,很多工具和資源可以用來配合使用,下面列舉了其中的一部分工具和資源。
jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源,能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似,這是一個為jQuery Mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問,那麼這個資源對你來說很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控制項。Fuel UI 安裝,修改,更新以及優化都很簡單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格,StyleBootstrap提供了更多的配色選項,並且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果,這個應用都會生成一個唯一的URL方便你與他人分享,你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大量免費的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件製作工具,是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
LayoutIt —— 通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性,簡單便捷。
2. Fbootstrapp
Fbootstrapp基於Bootstrap並且提供了跟Facebook iframe apps和設計相同的功能。包含用於所有標准組件的基本的CSS和HTML,包括排版、表單、按鈕、表格、柵格、導航等等,風格與Facebook類似。
3. BootMetro
BootMetro框架的靈感來自於Metro UI CSS,基於Bootstrap 框架構建,用於創建Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能,並添加了幾個額外的功能,比如頁面平鋪,應用程序欄等等。4. Kickstrap
Kickstrap是Bootstrap的一個變體。它基於Bootstrap,並在它的基礎上添加了許多app,主題以及附加功能。這使得這個框架可以單獨地用於構建網站,而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上,然後用就可以了。
App 是一些頁面載入完成之後載入運行的JavaScript和CSS打包文件。默認載入的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。
選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。
附加功能是一些用來擴展Bootstrap UI 庫的附件,它們的語法基本相同或者相似。
2. laravel 前端腳手架怎麼修改就打包資源
:laravel框架的開發不同於早期的那種php和asp的頁面數據嵌套,無法用那種思路來開發網站的。不過倒是可以考慮前後台分離的思路。用laravel框架來做介面,暴露給html頁面,用JSON來進行數據交互。然後在html頁面用ajax來請求數據來更新頁面內容。
3. 前端開發,用vue腳手架和不用腳手架區別在哪
腳手架的意思是幫你快速開始一個vue的項目,也就是給你一套vue的結構,包含基礎的依賴庫,只需要 npm install就可以安裝,讓我們不需要為了編輯或者一些其他事情浪費時間 總而言之,就是快速搭建項目的,讓我們可以早點去寫代碼
4. web前端的行業趨勢是什麼
大公司是前端和移動APP開發合並,成為大前端,所以一個趨勢就是移動web的趨勢,另外HTML5開始流行,HTML5開發也是現在需求很大的一個崗位。
web前端有廣闊的發展空間,app、小程序、移動端、pc端等都是需要前端技術的開發支持才能夠完成,技術門檻相對較低、需求量較大,薪資待遇良好。只要是互聯網端的客戶界面,就需要前端來製作完成,前端開發的編程量不大,但是需要部分編程,入門簡單,但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
在互聯網行業,前端有WEB前端、HTML前端等,隨著互聯網技術發展,就業方向也有很多。web前端的就業方向有web架構師、web前端工程師、HTML前端開發工程師、網頁設計師等等。
HTML前端開發
與Web前端開發不同的是,使用HTML5不僅僅可以開發前端,還有網頁游戲,手機APP,使用瀏覽器進行3D渲染等一系列建立在HTML5標准與搭載其標准瀏覽器上的開發,而未來可能會有更多的功能分支並入HTML5標准。web前端工程師
這個方向是目前從事Web前端開發的主要就業方向
Web架構師
薪資普遍比較高,技術要求高,掌握多種技能,包括:後端技術、DBA、Platform等等,甚至包括網站優化SEO技術。
數據方向
數據研發這個是在Web開發的基礎上用數據附能,懂可視化的一定是有前端能力的,懂hadoop的一定java要熟悉,屬於Web開發的拓展方向。
大前端方向
比如阿里,在大量實踐rn和weex;由於公司內部安卓/ios式微,一定程度上,前端把ios和安卓收編了,統稱大前端。
圖形學方向
前端自然是與圖形學有千絲萬縷的聯系,除了上面提到了可視化,還有相關3d引擎的開發工作。做這一行要求也非常高了,圖形學相關的演算法,3d引擎的開發,這都需要圖形學相關知識。
5. 有哪些生成前端代碼的神器呢
在前端開發的過程中,很多相同的代碼會寫很多遍。如:開始新項目的時候,要寫和舊項目類似腳手架代碼;新建一個組件的時候,要按約定寫組件結構。如果這些重復代碼能用工具來生成,能提升前端的開發效率。
生成代碼的工具分為兩類:基於命令的和基於圖像界面的。
基於命令的工具的優點是,可配置高,效率快。缺點是,可發現性差。適合配置項目很多,配置可以組合的情況。
基於圖像界面的優點是,可發現性強,操作簡單。缺點是如果配置項很多,容易變得很難用。
羅嗦了一堆,下面開始介紹正題。
項目腳手架代碼生成工具
項目腳手架主要做的項目的構建流程,環境的配置等。做到開箱即用。
基於命令的
yo曾經流行過的一個腳手架生成工具。支持定義腳手架內容。基於 yo 的第三方腳手架也很多。
vue-cli。 Vue 項目腳手架。支持自定義腳手架內容,感興趣的可以讀讀從vue-cli源碼學習如何寫模板。
create react appReact 腳手架。比較輕量級,只是整合 webpack 和 react-router。
react boilerplateReact 腳手架。比較重量級,整合了webpack 和 react router, rex, rex suga, reselect 等。
基於圖形界面的
定製 Bootstrap 3
組件代碼生成工具
基於命令的
react boilerplate的nam run generate可生成組件的腳手架代碼。
頁面代碼生成工具
基於命令的
代碼編輯器的代碼片段(Code Snippent)功能。主流的代碼編輯器(Sublime,Atom,VS Code,Web Strom等) 都支持代碼片段。也有寫好的代碼片段的編輯器插件。主流的框架基本都有對應的代碼片段工具。
Emmet提供 HTML,CSS,JS 的自動補全功能。
Bootstrap 3 Snippets
Vuejs Snippets
基於圖形界面的
H5營銷頁面生成工具。有一大堆。
Maka
初夜
兔展
GrapesJS強大的網頁生成器。開源。
LayoutIt托拽 Bootstrap 組件,生成頁面。
6. 前端或網站開發有哪些好用的腳手架
做開發的只要源碼不加密技術好的話都可以做二次開發的。
7. 做Web前端開發有前途嗎
當然有前途,但是這個前途也並不是針對所有人的,關鍵還是要看你自己是不是對前端有興趣,將來是否打算找前端崗位工作等等。
就發展前景而言,自12年到現在,國內Web前端的技術熱潮一直高居不下,這證明了前端是具有強大生命力的,至少未來5-10年是不用擔心行業的發展問題。那麼,2020前端發展的趨勢會是怎麼樣的?
1.Webview是運營風口
近幾年,小程序可謂是火得一塌糊塗,甚至獨立出來小程序開發這個崗位。
小程序的出現一方面告訴業界在當前設備上 Webview 也是非常優秀的;另外一方面告訴業界如何讓有能力的商家在超級APP上進行私域運營。但是缺點也是很明顯的,可能很難產生業界的最終標准,Web 的碎片化會更加嚴重。
2.工程體系形成閉環
曾經我們侃侃而談的 Yoman、cli等系列優秀的構建工具,在龐大的項目團隊中總覺得「差點意思」,所以慢慢發展到gulp、webpack和現在的cli ui界面。
2020年工程體系一定會繼續走向閉環,不再是一個腳手架這么簡單,而是會結合 IDE,打通業務屬性,從項目初始化、到編寫代碼、到 CI、到灰度、到發布形成一個相對完整的閉環。
3.Serverless與前端緊密聯系
其實 Serverless 早已和前端產生了聯系,只是我們可能沒有感知,比如我們經常使用的 CDN,它就是一種 serverless 的實現。
隨著 Serverless 的逐步落地,BFF 這層的代碼會擺脫運維、機器分配等復雜的問題。這也是我們前端應該做的,服務端同學專注中台系統的實現,對業務的好處是降低試錯成本。
簡而言之,前端發展很猛,待遇很豐厚,但是,如果你想學前端,就要打起十二分的精神,因為前端發展的潮流會將那些能力不足、技術落後的學習者拍死在沙灘上。
8. 前端開發中提到的「腳手架」是指什麼
前端開發中提到的「腳手架」是一個形象的比喻,比喻各類語言的前期工作環境。
在軟體開發上(當然也包括前端開發)的腳手架指的就是:有人幫你把這個開發過程中要用到的工具、環境都配置好了,你就可以方便地直接開始做開發,專注你的業務,而不用再花時間去配置這個開發環境,這個開發環境就是腳手架。
比如vue.js就有個vue-cli腳手架,基於node.js的開發環境,作者幫你把開發環境大部分東西都配置好了,你把腳手架下載下來就可以直接開發了,不用再考慮搭建這些工具環境。
9. 前端開發中提到的「腳手架」到底指什麼,CLI
軟體開發的腳手架的概念是從建築學術語上引申而來。在建築學上,腳手架指施工現場為工人操作並解決垂直和水平運輸而搭設的各種支架。你見過大樓施工吧?在大樓外牆圍的那圈支架就是其中一種腳手架。
在軟體開發上(當然也包括前端開發)的腳手架指的就是:有人幫你把這個開發過程中要用到的工具、環境都配置好了,你就可以方便地直接開始做開發,專注你的業務,而不用再花時間去配置這個開發環境,這個開發環境就是腳手架。
比如vue.js就有個vue-cli腳手架,基於node.js的開發環境,作者幫你把開發環境大部分東西都配置好了,你把腳手架下載下來就可以直接開發了,不用再考慮搭建這些工具環境。
10. 除了yeoman 還有哪些前端腳手架
一個流行的工具集,集合了grunt,bower,yo等工具,創建高質量可維護的應用。
在開發初期要對技術選型,在大多數web應用中,都需要第三方庫的支持。有些應用會使用jq,boostrap,有的還會用到angular,甚至有些都要引用,在我們確定了技術選型以後,我們通過yeoman的生成器插件,生成器插件"generator-XXX庫",所有的generator-生成器都採用npm包來安裝庫,安裝完成後,通過「yo XX」庫命令生成應用的腳手架。
下面介紹其他三個主要集合工具
yo工具:
讓初始化文件目錄變簡單,還是那話作為新時代的有為青年,我們要擺脫早期前端的刀耕火種,讓自動化的小機器人舞起來。通過ye webapp命令構建基礎web應用目錄。 基礎應用包含了:HTML5 Boilerplate、jQuery、Modernizr 和 Twitter Bootstrap 等。在基礎應用不能滿足我們的基本需求時,我們在通過yeoman的"gennerator-xxx庫,然後yo xxx加入骨架。
bower工具:
在Web應用中,我們可能會引入很多第三方的庫,傳統的做法是從這些網站上下載這些庫,然後放到項目目錄下的某個文件夾下去,之後在html中引用進去。這個做法無形中加大了有為青年們的工作量。尤其是在不同js庫中,我們要保證依賴庫之間的版本兼容問題。採用bower search XX庫,搜索xx庫,只有xx庫在bower中注