前端组件

1、redux中间件 答：中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。 常见的中间件： redux-logger：提供日志输出；redux-thunk：处理异步操作；redux-promise：处理异步操作；actionCreator的返回值是promise 2、redux有什么缺点 答：1.一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。 2.当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。 3、react组件的划分业务组件技术组件？ 答：根据组件的职责通常把组件分为UI组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。两者通过React-Redux 提供connect方法联系起来。 4、react生命周期函数 答：一、初始化阶段： getDefaultProps:获取实例的默认属性 getInitialState:获取每个实例的初始化状态 componentWillMount

移动APP开发框架盘点 总体概述 现在比较流行的移动APP开发框架有以下六种：网页、混合、渐进、原生、桥接、自绘。前三种体验与Web的体验相似，后三种与原生APP的体验相似。这六种框架形式，都有自己适用的范围。无所谓好坏，适用就是好。 l 网页应用适用于传统网站APP化，比如淘宝、京东，有大量WEB页面嵌入到APP中。 l 混合应用适用于小成本应用开发，全部代码都基于Web，好处是开发快速、成本低。 l 渐进应用适用于高机会成本的场合，边下载边使用，能快速获取，快速体验。 l 原生应用适用于大型和高体验要求的应用，能做出让人满意的体验效果。 l 桥接应用适用于高速迭代的创意类应用，让体验与成本都处于可接受的范围。 l 自绘应用适用于游戏和有特殊效果的应用，最大的好处是没有平台约束和表达瓶颈。 一、网页WebApp WebApp与传统Web的主要区别，在于前端框架，特别是V-DOM框架的应用。此类前端框架使得WebApp与NativeApp在机理上已经没有任何区别了。在众多的前端框架中， React、Vue和Angular是最有竞争力的选择。 React V-Dom技术的开创者，主流框架中的NO.1。React的贡献都是开创性的，在它基础上，也有很多兼容框架，比如Anu，Nerv。用以解决React在性能或IE兼容性上的问题。 主流技术方案： React + Redux +

本文来自网易云社区 作者：刘凌阳 前言 公司社区上关于Vue的文章挺少的（少的可怜），不禁为Vue愤愤不平，此文应运而生。 但笔者水平有限，也写不了什么特别高深的东西，只能简单介绍下Vue生态圈，如有不对之处，还望指正。 Vue.js Vue.js是一款极简的 mvvm 框架，如果让我用一个词来形容它，就是“轻巧” 。如果用一句话来描述它，它能够集众多优秀逐流的前端框架之大成，但同时保持简单易用。为什么这么说，因为Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js却一直受到一定程度的关注，而其本身也在高速发展中，不论是生态、社区、资源、插件等等都在日趋壮大。如果您还未曾了解Vue.js的话，建议您阅读 http://cn.vuejs.org/v2/guide/ ，这里有Vue.js正确的食用方法。如果您想在此文中知晓Vue.js核心的话，可能要让您失望了。本文不会介绍Vue.js的语法，模板、组件、API等等，这是一篇介绍Vue.js周边或者说Vue.js生态的文章（当然这要求你对Vue.js有一定程度的了解）。 Vuex 如果说整个生态圈里vue.js作为核心，坐实了老大地位的话，我会把Vuex放在老二的位置。学过React的人都知道Redux 的重要性，而Vuex之于Vue就像Redux之于React。 Vuex 是一个专为

vux github ui demo: https://github.com/airyland/vux Mint UI 项目主页: http://mint-ui.github.io/#!/zh-cn demo: http://elemefe.github.io/mint-ui/#/ github地址: https://github.com/ElemeFE/mint-ui 中文文档地址: http://mint-ui.github.io/docs/#!/zh-cn iview iView 配套的工作流: https://github.com/icarusion/vue-vueRouter-webpack github地址: https://github.com/iview/iview 官网: https://www.iviewui.com/ vue-mui 官网: http://mui.yaobieting.com/ github地址: https://github.com/creatshare/vue-mui radon-ui 中文文档： https://luojilab.github.io/radon-ui/#!/ github: https://github.com/luojilab/radon-ui antd vue 中文文档: http://okoala.github.io

适用PC端 1、 elementUI 支持vue2.x， 饿了么前端团队打造 2、 iView 支持vue2.x 3、 Vue Antd 支持vue1.x，据说不再有人维护 4、 N3 支持vue2.x 5、 AliTelecom UI 支持vue2.x，阿里通信技术团队打造 6、 Vue-Blu 基于Vuejs和Bulma开发 7、 Vue-Beauty 基于 vue.js 和 ant-design样式的PC端UI组件库 8、 Vuetify 一个material design vue 组件库 9、 vue-material 同 Material 风格的组件库 10、 Keen-UI 又一个 Material 风格的组件库 11、 Vue Admin 基于Vue 2.0 和 Bulma 0.2 开发的后台界面框架 适用移动端 1、 Muse-UI 基于Material Design开发，支持vue2.0 2、 Mint UI 支持vue2.0，饿了么前端团队打造 3、 VUX 基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面 4、 VUWE 基于微信WeUI所开发的，专用于Vue2的组件库 5、 WEEX 阿里推出的跨平台的移动端开发框架,可以构建高性能、可扩展的 native 应用 6、 VueStrap 基于 Vue.js 的 Bootstrap 组件

开源项目下载地址 vue-element-admin https://github.com/PanJiaChen/vue-element-admin 1.pc端的项目，最好的选择是ElementUI。（pc端） 　　一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element是饿了么前端开源维护的Vue UI组件库，更新频率还是很高的，基本一周到半个月都会发布一个新版本。组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。没有实际使用过，网上的Element教程和文章比较多。Element应该是一个质量比较高的Vue UI组件库。目前 star值36K; 　　 官网地址： http://element-cn.eleme.io/#/zh-CN 　　github地址：https://github.com/ElemeFE/element 2.iview组件库(pc端) 　　iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东

由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。 主要写一些 官方手册 上没有写，但是实际开发中会遇到的问题，需要一定知识基础。 涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 polyfill 与 transform-runtime 首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。 但是，存在如下两个问题： 1、异步加载组件时，会产生 polyfill 代码冗余 2、不支持对全局函数与实例方法的 polyfill 两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。 　　由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。 　　不支持全局函数（如：Promise、Set、Map），Set 跟 Map

由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。 主要写一些 官方手册 上没有写，但是实际开发中会遇到的问题，需要一定知识基础。 涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 polyfill 与 transform-runtime 首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。 但是，存在如下两个问题： 1、异步加载组件时，会产生 polyfill 代码冗余 2、不支持对全局函数与实例方法的 polyfill 两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。 　　由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。 　　不支持全局函数（如：Promise、Set、Map），Set 跟 Map

前言：转眼距离上篇 JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查） 已有好几个月了，今天打算将它捡起来，发现好久不用，Vue相关技术点都生疏不少。经过这几个月的时间，Vue的发展也是异常迅猛，不过这好像和博主都没什么太大的关系，博主还是老老实实研究自己的技术吧。技术之路还很长，且行且研究吧。 本文原创地址： http://www.cnblogs.com/landeanfen/p/6518679.html 一、为什么组件很重要 前两天，看到一篇关于 汇总vue开源项目 的文章，资源非常丰富，不得不感叹开源社区的强大。随便点进去看了几个UI组件，基本都不是原生的html用法，如果你不懂Vue的组件相关概念，看到一些“稀奇古怪”的标签写法，可能会使用，但肯定无法理解为什么可以这么写。比如我们随便找了一个名叫 IView 的来看看： <i-input type="text" :value.sync="formInline.user" placeholder="Username"> <Icon type="ios-person-outline" slot="prepend"></Icon> </i-input> 这样一段代码就能得到如下效果： 博主好奇心重，打算一探究竟，今天就和大家一起来看一看这些“古怪”写法的出处。希望通过本文，让你有一种“哦，原来是这样

什么是组件？ 　　组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件就可以了。 组件化和模块化的区别 模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个模块功能的职能单一。例如：NodeJS 组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用 方式一 　　使用 Vue.extend 配合 Vue.component 来进行创建全局组件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>独秀不爱秀</title> </head> <body> <div id="app"> <!-- 如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中 --> <mycom1></mycom1> </div> <script src="./lib/vue-2.4.0.js"></script> <script type="text/javascript"> // 1.1 使用 Vue.extend 来创建全局的 Vue 组件 const com1 = Vue.extend({ template: '<h3>这是使用 Vue.extent 创建的组件</h3>'/