前端组件

将多个静态资源打包为单个资源以减少请求数目，是提高页面加载速度的常用手段。于是上个星期，我就在实现网站静态资源的自动打包功能，原以为是个比较简单的问题，实现起来也没有遇到什么障碍，不过在开发完毕投入使用的时候却让我跌了下眼镜。由于静态资源在打包以后，它们的访问路径势必会改变，这样其他一些依赖于原有路径的资源就访问不到了。这方面最常见的例子，便是CSS样式表中引用的图片路径是相对于CSS文件路径的。当意识到这个问题以后，还真是让人手忙脚乱了一把。 例如，有一个描述对话框组件的CSS文件，它的原有访问路径为/styles/dialog/core.css，其中有行样式表为url(header.png)，这意味这幅图片的访问路径为/styles/dialog/header.png。同样，在另一个文件/styles/menu/core.css中也有url(bg.png)这样的代码。那么好，如果我们将这两个文件打包在一起，叫做/packed/styles/dialog-menu.css，那么浏览器就会去加载/packed/styles下的header.png和bg.png，为什么？因为url(…)这段代码，在打包后出现的位置就不同了。 解决这个问题似乎有多种办法，例如将资源文件复制到/packed/styles下面，但这就要处理文件重名的问题。如果使用组件化开发的方式

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight -

element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight - Sublime

转自：https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu - 帮助你轻松创建web应用 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-syntax-highlight -

UI组件 框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建web应用 vue-multiselect - Vue.js选择框解决方案 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件 vueAdmin - 基于vuejs2和element的简单的管理员模板 vue-ztree - 用 vue 写的树层级组件 vue-tree -

读书笔记：《高性能网站建设指南》 这本书中给出了14条提升网站性能的规则，由于实践经验尚浅，这里只做读书的总结。 绪言A：前端性能的重要性 　　 性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其余的80%~90%的时间花在了下载页面中的所有组件上。 绪言B：HTTP概述 　　压缩：减小响应的大小，浏览器可以使用Accept-Encoding头来生命它支持压缩。服务器使用Content-Encoding头来确认已被压缩。 　　条件GET请求：基于响应中的Last-Modified头，浏览器可以知道组件最后的修改时间。会使用If-Modified-since头将最后修改时间发送给服务器。 　　Expires头：通过明确指出浏览器是否可以使用组件的缓存副本来消除客户端和服务器之间进行一次往返确认的必要。 　　Keep-Alive：持久连接解决了多对一请求服务器导致的socket连接低效性的问题。 规则一——减少HTTP请求 　　图片地图(Image Map)：允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片了上的哪个位置。 　　CSS Sprites合并图片。 　　内联图片：通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。 　　合并脚本和样式表。 规则二——使用内容发布网络 　　CDN：Content

背景 在闲鱼深度使用 Flutter 开发过程中，我们遇到了业务代码耦合严重，代码可维护性糟糕，如入泥泞。对于闲鱼这样的负责业务场景，我们需要一个统一的应用框架来摆脱当下的开发困境，而这也是 Flutter 领域空缺的一块处女地。 Fish Redux 是为解决上面问题上层应用框架，它是一个基于 Redux 数据管理的组装式 flutter 应用框架， 特别适用于构建中大型的复杂应用。 它的最大特点是配置式组装， 一方面将一个大的页面，对视图和数据层层拆解为互相独立的 Component|Adapter，上层负责组装，下层负责实现，另一方面将 Component|Adapter 拆分为 View，Reducer，Effect 等相互独立的上下文无关函数。所以它会非常干净，易编写、易维护、易协作。 Fish Redux 的灵感主要来自于 Redux、React、Elm、Dva 这样的优秀框架，而 Fish Redux 站在巨人的肩膀上，将集中，分治，复用，隔离做的更进一步。 分层架构图 架构图，主体自底而上，分三层，每一层用来解决不通层面的问题和矛盾，下面依次来展开。 Redux Redux 是来自前端社区的一个数据管理框架， 对 Native 开发同学来说可能会有一点陌生，我们做一个简单的介绍。 Redux 做什么的？ Redux 是一个用来做可预测易调试的数据管理的框架

Semantic UI Semantic UI—完全语义化的前端界面开发框架，跟 Bootstrap 和 Foundation 比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。 Semantic UI 特点： 文档和演示非常完善 易于学习和使用 配备网格布局 支持 Sass 和 LESS 动态样式语言 有一些非常实用的附加配置，例如inverted类。 对于社区贡献来说是比较开放的。 有一个非常好的按钮实现，情态动词，和进度条。 在许多功能上使用图标字体。 Semantic UI 对浏览器的支持： Last 2 Versions FF, Chrome, IE (aka 10+) Safari 6 IE 9+ (Browser prefix only) Android 4 Blackberry 10 Bootstrap Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。 EasyUI jQuery EasyUI 为网页开发提供了一堆的常用UI组件，包括菜单、对话框、布局、窗帘、表格、表单等等组件。 下图是一个具有布局效果的窗口： Extjs ExtJS 主要用来开发RIA富客户端的AJAX应用，主要用于创建前端用户界面

前言 本章我们来学习Vue组件通信中的可以算是所有内容，在此之前，您最好掌握Vue的基础语法、指令等内容，同时也建议您查看我其他的文章进行补充。 组件通信 父子组件关系 通过上图顺带给大家说明了父子组件的实现原理，以及组件间传值传DOM的实现思路，那么我们看看Vue的代码来感受一下 父向子传值 模板部分(此处传值也能使用组件内的变量) <div id="app"> <!-- 传递一个字符串常量haha --> <son v-bind:text="'haha'"/> </div> js部分 // 子组件 var Son = { // 要接收的字段名称 props:['text'], template:` <div> {{ text }} </div>` }; Vue.component('son',Son); // 父组件 new Vue({ el:'#app' }); 显示结果很显然是子组件的haha 子向父通信 试想一种情况，由父组件控制子组件的显示，而从子组件中点击X来实现子组件的隐藏，那么实际的控制权确实在父组件 要处理这个问题，大家第一反应应该就是相当通过子组件的点击事件，拿到父组件内控制显示与隐藏的变量并更改就可以了 代码如下 // 隐藏按钮点击函数 methods:{ clickChild(){ this.$parent.isShow = false; } }