『壹』 如何搭建web前端框架
搭建web前端框架步驟如下：
1、確定項目使用的技術
根據項目的需求等來選擇使用的技術（這里以angular4 + typsescript + nodejs+mongodb舉例）
2、新建一個項目的工作文件夾
使用npm init初始化項目，根據問題配置，一般是直接回車使用默認配置,生成package.json文件
3、新建一個index.html頁面
4、新建配置文件system.config.js
5、新建ts的配置文件tsconfig.json
npm install typescript
6、新建webApp目錄，這裡面放的是所有html頁面和js代碼，首先得有個入口文件，與system.config.js配置文件中的入口文件名一樣，app.mole.ts，裡面引入了所有js文件，不被引入的在載入時都不會被載入
7、打包(將代碼壓縮，使程序運行速度更快）
『貳』 web前端開發框架有哪些
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基於 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2、html5-boilerplate：
該框架可以快速構建健壯，且適應力強的web app或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、Amaze UI：
國內首個開源HTML5跨屏前端框架產品系列，中文排版支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。
(2)web前端框架目錄擴展閱讀：
web框架程序的作用：
Web框架使得在進行Web應用開發的時候，減少了工作量。Web框架主要用於動態網路開發，動態網路主要是指現在的主要的頁面，可以實現數據的交互和業務功能的完善。
使用Web框架進行Web開發的時候，在進行數據緩存、資料庫訪問、數據安全校驗等方面，不需要自己再重新實現，而是將業務邏輯相關的代碼寫入框架就可以。也就是說，通過對Web框架進行主觀上的「縫縫補補」，就可以實現自己進行Web開發的需求了。
以PHP為例，PHP可以在apache伺服器上進行Web開發，而不必使用框架。使用PHP進行開的時候，在不適用框架的情況下，資料庫連接就需要自己來實現，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。
參考資料來源：網路-前端開發
『叄』 web前端三大主流框架都是什麼
web前端三大主流框架都是Angular、React、Vue。
3、Vue
Vue作為最後推出的框架（2014年），借鑒了前輩angular和react的特點（如VirtualDOM、雙向數據綁定、diff演算法、響應式屬性、組件化開發等）並做了相關優化，使其使用起來更加方便，更容易上手，比較少適合初學者。
『肆』 web前端主流框架主要有哪些
1、Bootstrap
AUI是最近流行起來的，作者聲稱是專為APIClound設計的一套框架，解決了許多移動端開發實際中遇到的許多問題，是一個純CSS框架。使用容器+布局+模塊的構建方式，JS輔助，更自由更靈活更易於擴展使用。遵循Google Material設計規范，完美適配各個機型。面向HTML5，使用CSS3實現動畫交互，輕量級高性能。AUI是使用MIT License授權，你可以復制、出售。目前最新版本2.0。
8、Amaze UI
這是稱為妹子UI的開源框架，據稱是中國首個開源HTML5跨屏前端框架。妹子UI以移動優先為理念，從小屏逐漸到大屏，實現響應式網頁。Amaze UI包含20+個CSS組件、20+個JS組件，更有多個包含不同主題的Web組件。相比國外框架，妹子UI關注中文排版提供本地化支持。面向HTML5開發，使用CSS3來實現動畫交互，輕量級高性能。
9、Frozen UI
Frozen UI是一款開源，簡單易用，輕量敏捷的移動端框架。基於手Q樣式規范，目前全面應用於企鵝手Q增值業務中。基礎樣式效果簡單色調清爽，社區活躍，組件自然不少。包括按鈕、列表、表單、通知、提示條、彈出框、選項卡等等常用組件。還包括一個FrozenJs的JS組件庫。可以在主流的Android和IOS上應用。基本樣式使用離線包的方式減少請求提供快速接入方案。當然，根據網友反映，也存在大大小小的bug。不過總體來說，還是值得一用的。奇怪的是，Github上顯示的最後更新時間是一年前，難道已經沒人維護了嗎？
# Running this will show the space usage of each folder in the current directory.# The -h option makes the report easier to read.# -s prevents recursiveness and shows the total size of a folder.# The star wildcard (*) will run on each file/folder in current directory. -sh *1.2G Desktop4.0K Documents40G Downloads4.0K Music4.9M Pictures844K Public4.0K Templates6.9M Videos
還有一個相似的命令 df（Disk Free），使用df會返回有關可用磁碟空間的各種信息。
『伍』 web前端常用的框架有哪些
現在比較常用的主流框架有Vue、React、Angular。
Angular
Angular原名angularJS誕生於2009年，之前我們都是用jquery開發，自從angular的出現讓我們有了新的選擇，它最大的特點是把後端的一些開發模式移植到前端來實現，如MVC、依賴注入等，創新式的雙向數據綁定不知簡化了我們多少代碼，讓我們為之瘋狂，特別是表單處理方面，從此名聲大噪。
好的框架一般會有兩個結果，一個繼續不斷更新迭代，避免被拍死在沙灘上，一個是被一些大公司收購煥發第二春，angular屬於後者被google所收購，且從2.0後改名angular並使用微軟的typescript作為開發語言，目前最新版本8.0，照說傍上google與微軟這兩條大船，前途應該不可限量才對，然而造化弄人，現在angular的市場份額已經被React這個後起之秀和Vue這顆新星遠遠地甩到腦後。
React
React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益於其創新式的VirtualDOM，性能上碾壓angularJS，一經推出，火的一塌糊塗。 特點很多，VirtualDOM、JSX、Diff演算法等，支持ES6語法，採用函數式編程，門檻稍高，但也更靈活，能讓開發具有更多可能性。
Vue
Vue作為最後推出的框架（2014年），借鑒了前輩angular和react的特點（如VirtualDOM、雙向數據綁定、diff演算法、響應式屬性、組件化開發等）並做了相關優化，使其使用起來更加方便，更容易上手，比較少適合初學者。網上有很多人說Vue不適合做大型項目，純屬扯淡，Vue在這方面已經優化得很好，當然，大量的響應式屬性（監聽屬性）也許會用一定的性能損耗，但在硬體、網路大力發展的今天，這些細微的性能差異幾乎感覺不到。
『陸』 這五個Web前端開發必不可少的開源框架，閉眼入
很多Web小白在學習、在選擇適合自己的Web語言時，比較糾結。其實有很多流行的、強大的前端開源框架，幫助你輕松構建漂亮的網站前端。
1、Pure
Bootstrap，Patternfly和MDC Web是功能非常強大的CSS框架，但它們可能非常繁瑣和復雜。如果你想要一個輕量級的CSS框架，可以嘗試Pure.css，它本身更接近於CSS編程，但又可以幫助你構建一個不錯的網頁。Pure是具有最小佔用空間的輕量級CSS框架，它由Yahoo開發，根據BSD許可是開源的。
2、Foundation
Foundation聲稱是世界上最先進的響應式前端框架。它提供了用於構建專業網站的高級功能和教程。許多公司，組織都使用該框架，並且該框架具有大量可用的文檔。
3、Skeleton
如果說還有什麼框架比Pure更加輕量級，那一定是Skeleton。Skeleton庫只有大約400行，並且該框架僅提供一些基本的CSS框架組件。盡管如此，Skeleton還是提供了詳細的文檔來幫助你快速上手。
4、Materialize
Materialize是一個基於Material Design風格的一個現代化的響應式前端框架，解決了最繁重的工作，結合你的自定義組件，為你提供默認的樣式。Materialize的文檔頁面非常全面，並且很容易遵循。其組件頁麵包括按鈕，卡片，導航等。
5、Bootstrap
Bootstrap無疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter開發。Bootstrap還提供了許多示例來幫助你入門。使用Bootstrap，你可以將不同的組件和布局組合在一起，從而創建有趣的頁面設計。它還提供了大量詳細的文檔。目前在Github上已經有1100多個貢獻者，19000多個提交。
『柒』 移動APP開發框架盤點2：Web移動前端框架大全
開源項目其實有一個成熟周期，這個周期大概是三年左右，自React框架在2013年發布並引爆了前端框架的大潮，這個屬於前端的周期就此開始了。
之後在2015年5月開源的React Native又開啟了屬於Web移動前端的周期，15-16年，18-19年，21-22年正好就是屬於移動前端的三個爆發點。
三年前，在第一個成熟收獲期，我盤點了移動開發框架。在這第二個成熟收獲期，理所當然要來盤點一波。
不過，當我點開github項目的code-frequency時，還是被這個准到嚇人的周期猜想驚呆了，先給你們看一波，剩下的自行驗證。
1、https://github.com/youzan/vant/graphs/code-frequency
2、https://github.com/quasarframework/quasar/graphs/code-frequency
再來說第二個比較有意思的發現，停止維護的項目絕大多數是Vue框架項目。
盤點開始的時候我還覺得React框架處於絕對劣勢，到完成時我發現React無論在選擇面還是成熟度上都超過了Vue。
原因我這里就不分析了，反正大家都有自己的看法。
網頁類框架就是前端組件框架，這一次雖然有大量項目停止維護，但是也有很多項目堅持了下來，而且還涌現出了一批新項目。
大廠佔了主導，因為這些年大廠在移動開發上的需求，遠高於其它方面。個人項目要堅持確實不易。
本來是想要做一個驗證項目，把所有框架都試用一遍並給出推薦度的。由於進度太慢，還是下一次再發吧。
這次的重點是漸進類框架，就是所謂多端同構框架（小程序框架）。這幾年國內的重點的各種小程序平台，所以多端框架的需求很是旺盛。
不過大多數先行者都沒挺過來還是讓我很意外，只有Taro成功了，想想還是有很多讓人唏噓的東西。
在這里還是先預測一波吧，因為這一類框架最變化最大，最終還是有很多框架要出局的。
漸進類框架是一個過渡性的產品，最終會變成橋接類框架的一部分，所以，與橋接類框架協同才是框架的出路。
這個賽道基本全是大廠了。
騰訊新一代跨端開發框架Hippy
Hippy一看就是淘寶Weex的對標項目，Kpi功能全面壓制。所以官方支持 React 和 Vue 兩種主流前端框架。在Weex2019年實質停更後發布，要不要這么卷？
Hippy 2.x 架構主要分成三層，UI(JS) 層 Hippy-React 和 Hippy-Vue 負責驅動 UI 指令生成；中間層 C++ HippyCore 負責抹平平台差異性和提供高性能模塊；渲染層 Android 和 iOS 負責提供終端底層模塊、組件，並與布局引擎通信。
對Weex慘遭遺棄，我上次就說過：「ReactNative提供工具，Weex提供框架，將平台差異化屏蔽（Write Once, Run Everywhere）。所以Weex則註定功能相對弱小，並且坑比較多。」Weex最終下馬也是必然的，淘寶又發布升級版北海，為了實現（Write Once, Run Everywhere），它採用自繪，而且是基於Flutter自繪。
所以Hippy3.x就一如既往的Kpi功能層層加碼，很有騰訊風格。在未來的 3.x 中業務與渲染層中的具體實現可根據用戶實際場景進行切換：業務層上不再局限於 JS 驅動，還可選擇（如：DSL/Dart/WASM 等）其它語言進行驅動；在渲染層中，渲染引擎除了支持現有原生（Native）渲染之外，還可以選擇其他渲染 Renderer，如 Flutter(Voltron) 渲染。
「Kraken 北海」是一款高性能Web渲染引擎。底層基於 Flutter 進行渲染。
Kraken 不限制上層開發者使用的框架，無論你是使用 Vue 、Rax 還是 React 都可以開發 Kraken 應用。
Kraken 的 runtime 通過 JS Engine Binding 的方式提供了一系列 Web 標準的 API 介面，調用相應 API 會執行相關邏輯並創建一系列需要發送給 Dart 層處理的指令。
Kraken 其實就是一個小程序平台，而且追求全平台完全一致。我雖然認為各平台不一致是很自然的事情，但是也表示理解，畢竟別人吹牛有當真的傳統（KFC表示認同）。
Kraken 現在也是一個小號瀏覽器，所以它的主要工作就是摳標准，畢竟它是一款基於 W3C 標準的高性能渲染引擎。
最後，我勸淘寶領導定Kpi要理智些，畢竟Hippy4我還蠻期待的。
滴滴出品的超輕量級動態化跨端開發框架，主打輕量和實用。
Hummer 以 JS 引擎為基石，目前已支持 JavaScriptCore、Hermers、QuickJS 等業內知名 JS 引擎（這里本來還有個V8的，我刪除了，源碼裡面沒有，Kpi需要）。再配合經過調優的 Yoga 布局引擎，抹平了兩端視圖布局差異（性能更佳的自研布局引擎開發中）。順便提一下，Hippy採用V8（功能更強）自研布局引擎（性能更佳）。
Hummer 的特點是拋棄了業界其他動態化跨端框架普遍使用的DSL層和VDOM層，因此原生 Hummer 不具備前端開發常用的響應式編程的能力，但同時換來的是接近原生開發的體驗和性能。再以原生 Hummer 為基礎，在此之上開發了一套基於MVVM架構的開發框架 —— Tenon ，通過 Tenon，可以把使用 Vue/React 編寫的代碼，轉換成原生 Hummer 的代碼。
Hummer也是一個小程序平台，而且超輕量。如果想要無限提升自己APP的能力，可以考慮嵌入Hummer。
Web移動前端框架正在迎來第三個高速發展期，各類框架得到極大繁榮。
個人在具體項目的貢獻已經微乎其微了，創新、架構創新是唯一制勝的手段，這也是我看好React的根本原因。
最後，還是想做點微不足道的 探索 ，現在前端組件庫層出不窮，更換組件庫帶來的代價有點大。想創建一個框架，來實現上次說的組件公約數和公倍數，無縫切換組件庫。理論上支持所有組件庫 ，也能為後來者提供彎道超車的機會。我想大廠可能沒有需求，也不會願意發布這種框架，畢竟都是平台部門說了算。
這個庫就是useMobile，當然分為useMobileReact和useMobileVue。下次先發布useMobileReact。等我發布後，再來填上面表中缺的推薦度。
原文地址： https://www.cnblogs.com/windfic/p/16019457.html