❶ 前端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. 轮播图的基础实现
知道了基础原理就可以进行组件的实现了，这里以移动端轮播图为例。
首先，获取移动端可视窗口的宽度。
------- 未完待续 --------