❶ 前端vue三級聯動組件之vue-area-linkage
最近的項目中涉及到省-市-縣/區三級聯動的功能實現，網上搜索了一圈，最後確定用了vue-area-linkage這個功能組件。現把使用方式及其中涉及到的問題記錄一下。
組件地址： vue-area-linkage
數據來源地址： area-data
1. 安裝：建議安褲枝裝v5及之後的版本
2.按需引入：在需要使用的頁面引入以下數據
3. 使用
vue-area-linkage有兩種組件，一種是area-select,一種胡叢敏為area-cascader，兩種組件的展示形式如下：
area-select：
area-cascader：
4. 使用中遇到的問題
先放一下項目的展示效果,如下圖，城市要求為二級聯動，區/縣要求是單獨的下拉框。
我實現的時候大致思路如下：在獲取到城市的值後，取出其對應的編號，根據area-data提供的pcaa['130000']方式，獲取到該城市下的所有區/縣，得到一個對象 areaData，然後賦值給area-select的data。事實上我也是這么做的，但是實現的時候遇到了一些問題。
首先，我的area-select的level選擇的是0，它會默認你是選擇的一級城市列表，而它的data數據要求是有格式的，所以，不能直接將拿到的areaData賦值給data，需要經過處理。
再者，數據格式正確了，賦值發現下拉還是沒有數據，查看組件源碼後發現，這個data並沒有監控，也就是值改變的時候他不會重新渲染，所以，我使用了v-if這個條件，配合 this.$nextTick()方法，在數據改變的時候重新載入。
這樣就實現了當選擇完省市之後鄭行，區縣聯動的效果了。
❷ 組件分享之前端組件——用於自定義表單的前端組件form-create
近期正在探索前端碧明、後端、系統端各類常用組件與工具，對其一些常見悔宴告的組件進行再祥穗次整理一下，形成標准化組件專題，後續該專題將包含各類語言中的一些常用組件。歡迎大家進行持續關注。
本次分享一款用於自定義表單的前端組件 form-create ，它可以通過JSON生成動態呈現、數據收集、驗證和提交功能。支持3個UI框架，並支持生成任何Vue組件。內置20種常用表單組件和自定義組件，無論多麼復雜的表單都可以輕松處理。
根據自己使用的 UI 安裝對應的版本
iview
view-design
element-ui
ant-design-vue
iview
element-ui
ant-design-vue
NodeJs:
iview
element-ui
ant-design-vue
更多內容可以參考其官方的 REAMDE
❸ 2015年前端開發組件選擇
一、文件上傳方面：
（1）Uploadify簡單說來，是基於Jquery的一款文件上傳插件。
（2）Plupload是一個web瀏覽器上的界面友好的文件上傳模塊，可顯示上傳進度、圖像自動縮略和上傳分塊。可同時上傳多個文件。
二、圖表製作方面：
（1）D3.js 是基於數據操作文檔的JavaScript庫。D3幫助你使用HTML，SVG和CSS生動地展現數據。D3不需要你使用某個特定的框架，它的重點在於對主流瀏覽器的兼容，同時結合了強大的虛擬化組件，以數據驅動的方式去操作DOM。D3支持的主流瀏覽器不包括IE8及以前的版本。D3測試了Firefox、Chrome、Safari、Opera和IE9。D3的大部分組件可以在舊的瀏覽器運行。
（2）JSCharts 是一款免費的開源JavaScript圖表腳本庫，支持XML數據格式，可以幫助用戶快速創建各類圖表，無需你具備相應的技術知識，甚至也不用你操作那些繁瑣的專業工具，省時省力。
三、Jquery ui方面：
（1）Chico UI和 jQuery UI 一樣，Chico UI 包含 auto-complete, blink, carousel, countdown, date-picker, dropdown, expand, calendar 等諸多逐漸，同時還提供一個 CSS 布局框架，用於實現網頁布局和表格。
（2）jQuery UI[1] 是以 jQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控制項。我們可以直接用它來構建具有很好交互性的web應用程序。所有插件測試能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。
四、表格組件方面：
（1）Flexigrid是一個類似於Ext Gird，但基於jQuery開發的Grid。它具有的功能包括：可以調整列寬，合並列標題，分頁，排序，顯示/隱藏表格等。Flexigrid顯示的數據能夠通過Ajax獲取或者從一個普通的表格轉換。
（2）ParamQuery grid是一個輕量級的jQuery網格插件，基於用於用戶界面控制、具有一致API的優秀設計模式jQueryUI Widget factory創建，能夠在網頁上展示各種類似於Excel和Google Spreadsheet效果的網格。
❹ 前端組件和插件的區別
組件：組件這個詞通常是現在描述產品的時候出現，一個大的產品會有很多小的部分組成，而小的部分除了是一個大的組件的部分以外，自己可能還包含更小的組件，所以組件是遞歸的，那麼組件到底是什麼呢？最常見的組件就是我們已經寫好的程序代碼，任何一小段代碼都可以是一個組件，它可以和其它代碼段連接起來組成更大的一段程序代碼，一個更大的組件，然後可能是一個函數，或者一個類程序單元，或者數個類單元文件的集成，當不同的組件的組裝形成更大的組件時候，我們實際就是在做我們通常提到的一件事情：集成，軟體中有很多集成工作要做，每日集成，重要版本集成等等。
插件：根據對組件和模塊的分析，插件屬於組件，而且還是一個程序模塊，也是一個功能模塊。插件是一種電腦程序，通過和應用程序的互動，來替應用程式增加一些特定的功能。
插件必須依賴於應用程序才能發揮自身功能，僅靠插件是無法正常運行的。
❺ 前端ui框架有哪些
在前端項目開發過程中，現在很少有人會使用原生的CSS來搭建頁面，總歸都會引入一些前端UI框架以減少代碼的書寫。一般為了方便自己的使用，很多大公司都有自己的一套UI框架，同時也會把其開源出來。下面就是最近經常使用並且很流行的一些前端UI框架，總有一款適合你：
Mint UI
Mint UI是餓了么團隊開發的基於Vue .js的移動端UI框架，它包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發需要。
WeUI
WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。
Cube-ui
Cube-ui 是滴滴團隊開發的基於 Vue.js 實現的精緻移動端組件庫。支持按需引入和後編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。
iView UI
iView UI是一個強大的UI庫，基於vue，有很多實用的基礎組件比elementui的組件更豐富，主要服務於 PC 界面的中後台產品。使用單文件的 Vue 組件化開發模式 基於 npmwebpackbabel 開發，支持 ES2015 高質量、功能豐富 友好的 API ，自由靈活地使用空間。
LayUI
LayUI是一款採用自身模塊規范編寫的前端 UI 框虧春如架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。
ElementUI
Element是餓了么前端開源維護的Vue UI組件庫,組件齊全，基本涵蓋後台所需的所有組件，文檔講解詳細，例子也很豐富。 主要用於開發PC端的頁面，是一個質量比較高的Vue UI組件庫。
at-ui
at-ui 是一款阿里團隊創建的基於 Vue 2.x 的前端 UI 組件庫，主要用於快速森信開發 PC 網站產品。 它提供了一套 npmwebpackbabel 前端開發工作流程，CSS 樣式獨立，即使採用不同的框架實現都能保持統一的 UI 風格。
amaze UI
amaze UI
Amaze UI 是一個移動優先的跨屏前端框架。提供基礎樣式，網格，表格、表單、按鈕及常用組件樣式。是一個輕量級（所有 CSS 和 JS gzip 後 100 kB 左右）、 Mobile first 的前端框架
Vant UI
Vant UI是有贊前端團隊基於有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效率。
Flutter
Flutter 是谷歌的銷啟移動端 UI 框架，可在極短的時間內構建 Android 和 iOS 上高質量的原生級應用。 Flutter 可與現有代碼一起工作, 它被世界各地的開發者和組織使用, 並且 Flutter 是免費和開源的.
ionic
Ionic既是一個CSS框架也是一個Javascript UI庫,Ionic 是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程序，它 提供了很多 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定，使用它成為 Web 和移動開發者的共同選擇。
❻ 在前端中什麼是組件化 什麼是模塊化
模塊化更一種開發規范，比如cmd amd 是為了更好的解藕，比如一個網站，按照不同的模塊來開發，比如你有個評論區，a 項目有，b 項目有，如果僅是單純的模塊開發，這個js 文件你就可以單獨來回引用，
更比如 ，一個頁面 分好多個功能， 這時候你要是都寫在一個js 中 會越來越大，
而你把他分成不同的模塊，
比如評論是一塊
分頁又是一塊，
已經上線，或你不做了，後期別人拉手，或你接手別人的項目， 這時候來個需求讓你把分頁去掉，或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的，
組件，更想當於一個通用的東西，有的分功能組件，有的分業務組件
大圖切換，這種就是單純的一個效果展示，只要調用就ok
一個分頁，也是只單純的調用，
組件更是一個多處都可以使用 ，不需要再單獨開發的
❼ [問與答]壓力給到了前端這邊:app如何獲取應用唯一標識
壓力給到了前端這邊：app獲取應用唯一標識的方法如下：
1、首先，由於內網用戶發起的網路請求通過Nginx代理最後都是以相同的IP請求伺服器，所以後台可以增加IP地址白名單，如果請求IP是前置機的公網IP，則返回登錄成功，允許訪問該頁面，如果不是白名單中的IP，則返回登錄失敗，不允余兆許訪問該頁面。
2、其次，在原生AndroidApp中辯毀睜，經常使用設攜歲備IP地址、MAC地址等等作為移動設備的唯一標識，或者通過簡訊驗證等方式。
❽ 前端開發框架有哪些_前端架構有哪些
前端框架好不好用還是要看具體情況分析，我這里給你推薦幾個常用的框架，可以按需使用。
1、vue-element-admin
一個基於vue2.0和Element的控制面板UI框架，這是並納簡使用vue技術棧開發的前端程序員的首選管理系統模板，模板已經非常成熟了，並且有相關的社區和維護人員，開發時候遇到問題也不要慌。
2、AdminLTE
非常流行的基於Bootstrap3.x的免費的後台UI框架，這是一個非常老牌的後台管理系統模板，每個頁面都是單獨的html網頁，適合前端入門新手用來做項目。
3、ant-design-pro
這個就不多說了，選擇react技術棧的童鞋們必然離不開這個優秀開箱即用的中台前端/設計解決方案，文檔齊全，組件豐富，一鍵生成模板，更支持開啟復制粘貼模式哦。
4、ng2-admin
這是基於Angular2、Bootstrap4和webpack的後台管理面板框架，要收前面已經有了React和vue技術棧的模板，那怎麼能少了ng的？雖然在國外用的比較多，國內較少使用，但絲毫不影響ng作為前端框架三巨頭之一的地位。
5：Gentelella
Gentelella是一個可免費使用的Bootstrap管理界面模版，使用群體比較廣泛。這個模版使用默認的Bootstrap3的樣式，還有一系列茄宴功能強大的jQuery插件和工具，可快速創建管理界面模版或者後台的Dashboard。
6：iview-admin
iViewadmin是基於iView的Vue2.0控制面板。搭配使用iViewUI組件庫形成的一套後台集成解決方案。
7：blur-admin
BlurAdmin是一款使用AngularJsBootstrap實現的單頁管理端模版，視覺沖擊極強的管理後台，各種動畫效果。
8：vue-manage-system
vue-manage-system，一個基於Vue.js和element-ui的後台管理系統模板，挺喜歡這個界面的UI，簡約清晰不累贅，多功能的後台框架模板，適用於絕大部分的後台管理系統開發。
9：material-dashboard
基於Bootstrap4和Material風格的控制面板。MaterialDashboard是一個開源的Material
BootstrapAdmin，其設計靈感來自谷歌的MaterialDesign。
10：d2-admin
D2Admin是一個完全開源免費的企業中後台產品前端集成方案，基於vue.js和ElementUI的管理系統前端解決方案，小於60kb的本地首屏js載入,已經做好大部分項目前期准備工作
11：vuestic-admin
vuestic-admin管理台儀表盤是一個響應式的儀表盤模板，採用Bootstrap4和Vue.js構建。這個精美的管理台模板提供了自定義元素組件，如地圖，聊天，個人資料卡，圖標，進度條等，以及用於絕褲登錄和注冊的預建頁面。
❾ 前端通用組件設計
調用組件庫的API相信很多人都會用，但是如何封裝一個高復用的組件並不是每個人都能做到，而這也是檢驗一個前端開發人員的一個標准。
說到開發組件，首先需要考慮一個問題，一個可復用的組件都需要具備哪些必要條件。
1. 細粒度考量
看過設計模式的朋友應該有了解過很多設計原則，其中一個就是 單一職責原則 ，這個原則放在開發組件中也同樣適用。在原則上一個組件就只負責一件事，這就是單一原則所帶來的好處也非常明顯，就是可以更大可能的復用組件。但如果職責過於單一，也會造成組件碎片化嚴重，過於抽象。
因此我們需要考慮，所謂的單一職責原則是建立在可復用的基礎上的。否則，可以做為獨立組件的內部組件進行使用。
2. 組件通用性考量
組件設計之初是為了當時的頁面設計進行封裝設計的，那麼之後的頁面設計極大可能是與之前不同的，那麼之前設計的組件就不能用了。
而一旦發生這樣的情況，就說明我們之前所設計的組件是不通用的，需要重新設計了。就像Antd組件庫那樣，預留了dropdownRender進行組件渲染。
通用性的設計就代表著將放棄對DOM的操作權，暴露給開發者進行操作，組件開發者本身只負責底層邏輯和基本的DOM結構。這也是開發通用型組件的秘訣之一。
3. 技術選型
css存在著許多的弊端，例如樣式易沖突（沒有作用域的概念）、書寫繁瑣（不支持嵌套）、缺少變數（不便於一件更換主題）等等。而解決這些問題的方案也是層出不窮，從最早的css預處理，到後來的Postcss，再到後來的styled-compontent，各種方式任君選擇。
4. 打包工具
產品的設計思想固然是核心，但是也需要一堆輔助工具來來幫助我們開發，例如編譯工具、測試工具、打包工具。
說到打包工具，就不得不提一下如今非常火爆的，需要配置工程師專門配置的webpack了。但是他也有一個強大的競爭對手 rollup。
rollup更適合用於組件庫的打包，優勢如下：
設計一個輪播圖組件
學以致用，學了就肯定要實踐一下。輪播圖是一個比較常見的組件，每個組件庫中都封裝的有，接下來我們也來介紹一下如何設計一個輪播圖組件。
1. 輪播圖原理
通常情況下我們使用輪播圖是這樣編寫的
那麼為什麼放入了四個div盒子卻只顯示一個呢，這是因為可視區域是固定的，只需要移動div盒子就可以顯示出後面的盒子，這樣就達到了輪播的效果。
為了是觀看效果更好，我們都會隱藏掉可視區域之外的內容，這樣就是大家經常看到的輪播圖了。組件就可以這樣設計：
可以通過transform: translateX()不斷改變SlideList的位置，就可以達到輪播的效果了。
2. 輪播圖的基礎實現
知道了基礎原理就可以進行組件的實現了，這里以移動端輪播圖為例。
首先，獲取移動端可視窗口的寬度。
------- 未完待續 --------