㈠ web前端開之網站搭建框架之vue詳解
網站搭建框架之vue
Vue是web前端快速搭建網站的框架之一。它與jQuery有所不同，是以數據驅動web界面（以操作數據改變頁面，而jQuery是以操作節點來改變頁面），同時，vue還實現了數據的雙向綁定，可及時響應用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。
對於vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。
引入vue.js的寫法
Vue分為V層（視圖層）和M層（數據層），一般都是由M層的數據來驅動V層的改變。而vue的常用指令數量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數據寫進標簽內，但它們的不同之處在於v-text會將標簽當做文本內容寫入
，而v-html則會對標簽進行編譯，只顯示標簽內的內容。
至於v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執行的，當布爾值為真時，設置了v-show、v-if指令的標簽會顯示出來，當布爾值為假時，標簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標簽的display屬性來使標簽顯示或隱藏；而v-if、v-else是通過添加或刪除節點，來顯示或隱藏標簽的。
V-for是vue的一種遍歷方法，這個方法極大的簡化了數組或對象的遍歷並顯示到頁面的步驟
而v-bind：是對html屬性或自定義屬性的數據驅動方式，格式為v-bind:href，可簡寫為：href。對於類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數據類型為對象。
V-model指令的作用是將數據進行雙向綁定，僅限於輸入類型標簽。當用戶在頁面輸入時，數據層的數據會跟著改變。這是VM模式。由v驅動m。
除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，並將執行函數寫到vue的methods中
通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構建出一個頁面。
（組件書寫格式）
（組件整合）
（注冊路由）
路由是通過vue-router來實現的，在注冊路由的時候要將router實例化。不同的路由跳轉不同的頁面，這是搭建單頁面應用的優勢。
而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內容，這樣子組件的復用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。
通過引入vuex並實例化一個Vuex.Store作為一個公共平台，將數據進行傳輸。通過vue的computed方法接收數據，通過methods方法改變數據。而這個公用平台可以實現組件與組件之間的信息傳遞，從而實現組件之間的交互。
通過一個星期的實戰，深深的體會到了vue的優勢，在構建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結合，畢竟每個工具都有其優點，擇其優而用是明智的選擇。
㈡ 前端常用的框架有哪些
web前端的主流框架，下面，我給大傢具體介紹一下：
1.Angular:Angular是一個優秀的前端JS框架。Angular有很多特性，核心是MVW(Model-View-Whatever)、模塊化、自動雙向數據綁定、語義標注、依賴注入等。Angular是一個比較完整的前端框架，包含了服務、模板、雙向數據綁定、模塊化、路由、過濾器、依賴注入等所有功能。自定義指令後可以在項目中多次使用。
2.React:React可以非常容易地創建用戶界面。為應用程序的每個狀態設計簡潔的視圖，React還可以在數據發生變化時高效地更新渲染界面。React為你的程序編寫獨立的模塊化UI組件，這樣當一個或一些組件出現問題時，可以很容易地隔離出來。
3.Vue:最近幾年最火的前端框架是Vue.js，這是一個構建數據驅動Web界面的漸進式框架。Vue.js的目標是通過盡可能簡單的API實現響應和組合視圖組件的數據綁定。Vue是模塊友好的，可以通過NPM、鮑爾或Duo安裝。它不會強制你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
以上三個是我給大家介紹的web前端主流框架。希望我的回答對你有幫助。
㈢ web前端開發的框架有哪些
web前端開發的框架大致有如下幾種
1、Bootstrap
Boostrap是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
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，主題以及附加功能。這使得這個框架可以單獨地用於構建網站，而不需要額外安裝什麼。需要做的僅僅是把它放到網站上，然後用就可以了。
㈣ 前端常用的框架有哪些
web前端的主流框架，下面，我具體給你介紹一下：
1、Angular：Angular是一款優秀的前端JS框架，Angular有著諸多特性，最為核心的是MVW（Model-View-Whatever）、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。Angular是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能，在自定義指令後可以在項目中多次使用。
2、React：React可以非常輕松地創建用戶交互界面。為你應用的每一個狀態設計簡潔的視圖，在數據改變時React也可以高效地更新渲染界面。React為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
3、Vue：近幾年最火的前端框架當屬Vue.js了，Vue.js是一個構建數據驅動的Web界面的漸進式框架。Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。Vue對模塊很友好，可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
以上三個就是我給你介紹的關於web前端主流的框架，希望我的回答對你有所幫助
㈤ 前端有哪些框架
我總結了五種較為主流的框架，希望能夠幫到你：
AngularJS
Angular JS 是一個有Google維護的開源前端web應用程序框架。它最初由Brat Tech LLC的Misko Hevery於2009年開發出來。Angular JS是一個模型-視圖-控制器（MVC）模式的框架，目的在於使HTML動態化。與其他框架相比，它可以快速生成代碼，並且能非常輕松的測試程序獨立的模塊。最大的優勢是在你修改代碼後，它會立即刷新前端UI，能馬上體現出來。
ReactJS
React JS 不像一個框架反而更像一個庫，但絕對是值得一提。AngularJS是一個MVC模式的框架，但ReactJS是一個由Facebook開發的非MVC模式的框架。它允許你創建一個可復用的UI組件，Facebook和Instagram的用戶界面就是用ReactJS開發的。
Bootstrap框架
Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。 Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。
Foundation框架
Foundation 是一個免費的前端框架，用於快速開發。Foundation 包含了 HTML 和 CSS 的設計模板，提供多種 Web 上的 UI 組件，如表單、按鈕、Tabs 等等。同時也提供了多種 JavaScript 插件。
VueJS框架
Vue.js簡介：Vue.js是一套構建數據驅動的 web 界面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。
想要學習更多的前端知識或想要從事這方面的工作，推薦了解一下北京尚學堂，科學的教學理念，帶給你不一樣的前端學習體驗。
㈥ 北大青鳥設計培訓：web前端多端編程開發框架結構
隨著我們對web前端編程開發技術的掌握，越來越多的框架語言和架構方式被我們所熟知。
下面四川北大青鳥http://www.kmbdqn.cn/就一起來了解一下，web前端開發的一些常見框架結構。
1.全包型這類框架大的特點就是從底層的渲染引擎、布局引擎，到中層的DSL，再到上層的框架全部由自己開發，代表框架是Qt和Flutter。
這類框架優點非常明顯：性能(的上限)高;各平台渲染結果一致。
缺點也非常明顯：需要完全重新學習DSL(QML/Dart)，以及難以適配中國特色的端：小程序。
這類框架是原始也是純正的的多端開發框架，由於底層到上層每個環節都掌握在自己手裡，也能大可能地去保證開發和跨端體驗一致。
但它們的框架研發成本巨大，渲染引擎、布局引擎、DSL、上層框架每個部分都需要大量人力開發維護。
2.Web技術型這類框架把Web技術(JavaScript，CSS)帶到移動開發中，自研布局引擎處理CSS，使用JavaScript寫業務邏輯，使用流行的前端框架作為DSL，各端分別使用各自的原生組件渲染。
代表框架是ReactNative和Weex，這樣做的優點有：開發迅速;復用前端生態;易於學習上手，不管前端後端移動端，多多少少都會一點JS、CSS。
缺點有：1.交互復雜時難以寫出高性能的代碼，這類框架的設計就必然導致JS和Native之間需要通信，類似於手勢操作這樣頻繁地觸發通信就很可能使得UI無法在16ms內及時繪制。
ReactNative有一些聲明式的組件可以避免這個問題，但聲明式的寫法很難滿足復雜交互的需求。
2.由於沒有渲染引擎，使用各端的原生組件渲染，相同代碼渲染的一致性沒有一種高。
3.JavaScript編譯型這類框架就是我們這篇文章的主角們：Taro、WePY、uni-app、mpvue、chameleon，它們的原理也都大同小異：先以JavaScript作為基礎選定一個DSL框架，以這個DSL框架為標准在各端分別編譯為不同的代碼，各端分別有一個運行時框架或兼容組件庫保證代碼正確運行。
㈦ 從0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架
因為現在公司的主要技術棧是React,所以也想著能夠搭建一個好的React前端框架，方便在工作中使用；框架在打包過程也做了優化，多線程，拆包，緩存等等手段提升打包速度和質量。主要用到的庫包括：
創建帶TypeScript模板的react-app，推薦使用yarn,接下來我也主要以yarn做例子
然後在項目根目錄創建一個 craco.config.js 用於修改默認配置。antd按需載入以及自定義主題
重新打包就可以了， 所有的主題配置在這里噢
這里利用React-router做路由，同時也會根據用戶角色，做許可權處理；只有當角色和路由允許的角色一致時才可以訪問和展示。
新建router下新建indext.tsx 用於渲染頁面
引入Router/index.tsx
新建hasPermission.ts,如果頁面 roles 包括用戶的角色則返回true,在渲染menu和子頁面的時候就根據這個值渲染頁面。
比如Home頁面，渲染子頁面的邏輯：
在這里 SubPages1 下面的 page1 就無法展示出來和訪問，如果直接輸入路由也會訪問頁面不存在，因為page1允許的角色 user 而我們角色是 admin 所以無法展示。
useImmer 很好的解決了ReactHooks中的賦值的性能問題，可以單獨更新某個對象的某個屬性。
上面的賦值方法也可以寫到一起,效果是一樣的：
Umi Hooks 是一個 React Hooks 庫，致力提供常用且高質量的 Hooks。提供了非常多的Hooks組件，比如上面使用的 usePersistFn ，他的作用：在某些場景中，你可能會需要用 useCallback 記住一個回調，但由於內部函數必須經常重新創建，記憶效果不是很好，導致子組件重復 render。對於超級復雜的子組件，重新渲染會對性能造成影響。通過 usePersistFn ，可以保證函數地址永遠不會變化。Umi Hooks功能還是非常強大的，有很多功能很強大的API。大家可以去官方文檔看看 https://hooks.umijs.org/zh-CN/hooks/life-cycle/use-update-effect 。
自定義 hooks 其實在我們的開發工作中，還是很常遇到的。 hooks 的好處就是可以抽離公共方法，像組件一樣的隨意使用，對於快節奏的開發工作還是很舒服的，比如你覺得 react hooks 或者 umi hooks 的api，不能滿足自己的需求，也可以自己創新一些api。我這里舉個例子，大家寫 class 組件寫的很多的話，會經常用的 this.setState() ，大家都知道 this.setState() 是非同步執行，你無法直接拿到最新的 state 。 hooks 中的 useState 同樣也是非同步的，你無法直接獲取到最新的 state ，所以我自己寫了一個 useSetState 方法，用於在修改完狀態後能夠立即拿到最新的 state 。
我們在src/hooks文件夾下新建 useSetState.ts
使用的方式也很簡單，基本和useState一致，只是在setState的時候提供一個回調函數。
這就完成了帶回調的 useSetState hooks 的編寫，不過這種寫法不太推薦在 hooks 中使用，建議需要獲取最新的數值都在 useEffect 或者 useUpdateEffect(umi hooks) 中去。
狀態管理選擇的Mobx,Mobx和Rex我都用過，不過當我習慣用Mobx後，就感覺還是Mobx更方便一些，所以更喜歡在項目中用Mobx,現在Mobx已經更新到5.0版本了，不過5.0版本並不支持ie11，所以如果想要兼容性可以選擇4.0的版本，或者Rex。
這里推薦一個針對Mobx的庫， mobx-react-lite :它是基於 React 16.8 和 Hooks 的 MobX 的輕量級React綁定。
這個主要影響的是調用方法的形式，對於Mobx的書寫是一樣的，比如寫一個加減數值：
這里你的typeScirpt可能會編譯不了，會報錯：Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
解決方法是在 tsconfig.json 加入配置：
完畢以後，一定要把 storeProvider 包裹所需要共享狀態的頁面，我這里直接放到app.tsx
剩下來就僅僅是調用的事情了：
此外axios的配置應該大家都知道，所以我這也不多說了，具體在我的源碼裡面也有，utils下的axios.ts
加入了打包分析 webpack-bundle-analyzer speed-measure-webpack-plugin
加入了打包進度條 webpackbar
加入了打包壓縮 compression-webpack-plugin terser-webpack-plugin
還對包進行拆包
開發環境的域名代理 devServer
加快打包速度，還可以考慮刪除antd-icons，單獨去iconfont網站下，按需引入。不然打包會費很多時間
引入dotenv-cli
新增開發環境配置文件 .env.development 和 .env.proction 兩個文件
然後修改package.json中的啟動腳本：
現在 yarn start 或者 yarn build 就會根據環境配置來處理。
還有一些細節的調整，會盡力將這個框架更加完善的。
github地址： https://github.com/Benzic/React-typescript-umihooks-mobx
歡迎star 和提意見
㈧ 前端開發框架是什麼
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基於 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2、html5-boilerplate：
該框架可以快速構建健壯，且適應力強的web app或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、Amaze UI：
首個開源HTML5跨屏前端框架產品系列，中文排版前端的學習都是需要不斷的學習，學一天停一停相當於白學，學習效果很差，如果你想有人一起學習可以來這個扣裙，首先是132 中間是667最後是127 都是零基礎的同學，大家相互鼓勵 共同努力 只是學著玩就不建議來了!!!支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。
(8)前端框架的構建擴展閱讀：
web框架程序的作用：
Web框架使得在進行Web應用開發的時候，減少了工作量。Web框架主要用於動態網路開發，動態網路主要是指現在的主要的頁面，可以實現數據的交互和業務功能的完善。
使用Web框架進行Web開發的時候，在進行數據緩存、資料庫訪問、數據安全校驗等方面，不需要自己再重新實現，而是將業務邏輯相關的代碼寫入框架就可以。也就是說，通過對Web框架進行主觀上的「縫縫補補」，就可以實現自己進行Web開發的需求了。
以PHP為例，PHP可以在apache伺服器上進行Web開發，而不必使用框架。使用PHP進行開的時候，在不適用框架的情況下，資料庫連接就需要自己來實現，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。