1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约，是我喜欢的风格 star 2.3k 中文文档 在线预览 https://wangdahoo.github.io/vonic/docs/#/home 2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k 基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。 中文文档 在线预览 https://vux.li/demos/v2/?x-page=v2-doc-home#/ 3.Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库 star 8.3k 中文文档 github地址 在线预览 https://github.com/ElemeFE/mint-ui 4.MUI 最接近原生APP体验的高性能前端框架 star 7.5k 中文文档 github地址 http://dev.dcloud.net.cn/mui/ 5.Muse-ui 基于 Vue 2.0 和 Material Design 的 UI 组件库star 4.9k 中文文档 github地址 https://github.com/museui/muse-ui 6.Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。star 1k 中文文档 github地址 https://github.com/youzan/zent 7.Cube UI star 3k 滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库 github地址 中文文档 https://github.com/didi/cube-ui 特性 质量可靠 由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。 体验极致 以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。 标准规范 遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。 扩展性强 […]
View Detailsvant（轻量级，适合微信公众号项目使用） [https://youzan.github.io/vant/#/zh-CN/intro] iview https://www.iviewui.com/ Ant Design Vue [https://www.antdv.com/docs/vue/introduce/] element http://element.eleme.io/ vuetify https://vuetifyjs.com/ vue-strap http://yuche.github.io/vue-st… cube-ui https://didi.github.io/cube-ui/#/zh-CN/example buefy https://buefy.github.io/#/ vue-beauty https://fe-driver.github.io/vue-beauty/#/components/button vue-storefront http://vuestorefront.io/ at-ui https://at-ui.github.io/at-ui/#/zh vue-blu https://chenz24.github.io/vue-blu/#/ vux https://vux.li/ 光子补充：vuetifyjs https://vuetifyjs.com/en/components/timelines/ 作者：曾经也是个少年 链接：https://www.jianshu.com/p/69729b7f9871 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details有项目需要用到ExtJS，而且是老版本的，MVC的开发方式，前后端分离。 经过几天的学习，做了个demo，供大家学习参考。直接上图~ 源码下载
View Details参考自：https://blog.csdn.net/luckypeng/article/details/43151793 介绍： 使用ExtJS MVC构建出如下图框架。 ps： 此实验是接着 "ExtJS MVC框架搭建（三）" 教程后面做的， 所以主页为 index2.html, JS文件为 app2.js 一、自定义一个viewport组件 新建 app/view/Viewport.js 文件， 内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
Ext.define('OA.view.Viewport', { extend: 'Ext.container.Viewport', //布局方式：border layout: 'border', items: [{ title:'ExtJS案例', collapisble: true, region:'north', height: 100, html: '<br><center><font size=5>MVC模式实现的ExtJS案例</font><br><font size=2>' + '源码来源:ITLee博客</font></center>' },{ title: '功能菜单', region: 'west', width: 180, split: true, collapisble: true, items:[{ xtype: 'menutree' }] }, { region: 'center', id: 'mainContent', xtype:'tabpanel', layout: 'fit', collapisble: true }] }); |
ps：①自定义的试图组件继承了 Ext.container.Viewport , 且采用的border布局 ②border布局的 中间部分（region: "center"）为tabpanel ③border布局的 左边部分（region:’west’）里面放着是 树型面板（xtype: 'menutree', menutree 继承了 treepanel， 下一步介绍menutree） 二、定义一个 treepanel组件 新建 app/view/MenuTree.js 文件，内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Ext.define('OA.view.MenuTree', { // 定义一个菜单组件 extend: 'Ext.tree.Panel', alias: 'widget.menutree', //给菜单组件取个别名：menutree， 在viewport组件中有用到 border: false, //规定锚链接地址的显示区域 hrefTarget: 'mainContent', //是否显示根节点 rootVisible: false, //数据集 store: 'MenuStore' }); |
ps：①、 自定义的 MenuTree 菜单组件，该组件继承 treepanel ②、store :’MenuStore' 指定了菜单面板的数据集，下一步会定义 这个 MenuStore 数据集 三、定义一个 store 组件 新建 app/store/MenuStore.js 文件， 内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Ext.define('OA.store.MenuStore', { extend: 'Ext.data.TreeStore', autoLoad: true, proxy: { type: 'ajax', url: 'data/data.json', reader: { type: 'json', root: 'children' } } }); |
ps：①、定义的store组件，继承 Ext.data.TreeStore ②、 配置 autoLoad: true， 以便自动加载数据 ③、 配置 proxy 加载远程数据， 请求地址为 data/data.json, 下一步就创建这个文件 四、定义 json 数据 用于创建 树型结构 新建 webapp/data/data.json 文件，内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
[ { "id": "2", "text": "用户管理", "leaf": false, "url": "http:\/\/www.lihuai.net", "children": [ { "id": "5", "text": "基本信息", "leaf": true, "url": "http:\/\/www.sogou.com", "children": "" }, { "id": "11", "text": "信息管理", "leaf": true, "url": "http:\/\/www.sogou.com", "children": "" }, { "id": "12", "text": "添加用户", "leaf": true, "url": "http:\/\/www.sogou.com", "children": "" } ] }, { "id": "3", "text": "产品管理", "leaf": false, "url": "http:\/\/www.so.com", "children": [ { "id": "7", "text": "产品信息", "leaf": true, "url": "http:\/\/www.so.com", "children": "" }, { "id": "8", "text": "产品添加", "leaf": true, "url": "http:\/\/www.so.com", "children": "" } ] } ] |
五、定义 Main控制器，用于管理这些对象 新建 app/controller/Main.js […]
View Details背景 本来不打算写这篇文章的，但是按照官方文档的介绍，还是会出现一些问题。该文章就是简洁的介绍一下如何使用Sencha Cmd及其注意事项。 官方文档 Introduction to Sencha Cmd Using Sencha Cmd with Ext JS 4.2+ Compiler-Friendly Code Guidelines Workspaces in Sencha Cmd 环境要求 Java Run-time Environment or JRE，版本>=6.0。 Ruby，不要下载最新版，Ruby 1.9.3-p392可以。 Sencha Cmd。 Ext JS SDK。 创建一个workspace 目录名称不要用中文，特殊符号最好也不要用，中文我测试了不行。
|
1 2 |
1 cd /d F:\ExtJs4.2\ext-4.2.0.663 2 sencha generate workspace F:\ExtJs4.2\MyWorkspace |
创建两个app（一个app一个html）
|
1 2 3 4 5 |
1 cd /d F:\ExtJs4.2\ext-4.2.0.663 2 sencha generate app App1 F:\ExtJs4.2\MyWorkspace\app\app1 3 4 cd /d F:\ExtJs4.2\ext-4.2.0.663 5 sencha generate app App2 F:\ExtJs4.2\MyWorkspace\app\app2 |
编译创建的两个app
|
1 2 3 4 5 |
1 cd /d F:\ExtJs4.2\MyWorkspace\app\app1 2 sencha app build 3 4 cd /d F:\ExtJs4.2\MyWorkspace\app\app2 5 sencha app build |
结果 项目结构 编译后的运行效果 备注 sencha cmd 必须运行在SDK目录或app目录，具体的可以参考官方文档。 from:https://www.cnblogs.com/happyframework/archive/2013/05/07/3060630.html
View Details1 ExtJS入门 1.1 支持所有主流浏览器 调试推荐：chrome、Safari、Firefox 1.2 推荐目录结构 – appname （包含所有程序代码，是根目录） – app （包含所有类，按包的规则命名子目录） – namespace – Class1.js – Class2.js – … – extjs （ExtJS 4 SDK） – resources （CSS图片等资源文件） – css – images – … – app.js （程序入口，包含程序逻辑） – index.html （入口文件） ExtJS 4 SDK部分说明： – extjs/resources/css/ext-all.css 包含了所有样式 – extjs/ext-debug.js 包含了最基础的一些类，ExtJS 4 Core核心部分，只在开发时使用，任何附加的类都通过动态加载引入（会造成n多请求，所以发布应用的时候不要用这个） – extjs/ext.js 功能和ext-debug.js一致，但是是用于对外发布的，它和app-all.js一起使用 – extjs/ext-all-debug.js 包含ExtJS全部内容，全部class，它可以像ExtJS 3那样使用，可以减少学习成本，官方还是推荐ext-debug.js这种引入了新机制的方式 – extjs/ext-all.js 是ext-all-debug.js的压缩版本，内容跟其一致，可用于发布，但是它包含所有内容，官方不推荐 – all-classes.js 包含app自定义的所有类，这个文件没有压缩可以方便调试 – app-all.js 这个文件是压缩过的，包含所有app代码和依赖的类，相当于一个可以用于发布的 all-classes.js + app.js – builds：是extjs压缩后的代码，体积更小，加载更快 – docs ：extjs的文档 […]
View DetailsExtJS是一个富客户端开发框架，用它做出来的用户界面风格很统一。对于美工不好的的后端开发人员来说，用这个东西做界面，完全就不需要考虑美工了，它内置的样式模板显示的效果还是非常好的。 现代工程应用的开发量，无论是后端逻辑，还是前端的界面展示，代码量都会非常大，如何保持代码的结构逻辑清晰，非常必要。在后端有MVC（Model View Controller）代码分层结构，ExtJS如今也引入了该设计方法，使前端代码看起来也结构规整、逻辑清晰，增强了前端代码的可读性、可维护性。 下面将通过一个例子来看看ExtJS的MVC是怎么回事。 在MVC的布局模式中，所有的类都放置在app文件夹中，这个文件夹还包含了一些子文件夹用于命名你的models,views,controllers,stores.下图为goods这个应用程序的文件夹结构。 Ext工程，必须在应用程序入口（app.html）引入ExtJS的2个文件，一个是SDK核心js类库ext-all.js（也可以是ext-all-debug.js或者bootstrap.js；第一个是服务部署版本，第二个是开发阶段版本，第三个会运行环境调用第一或第二个）、一个是核心样式表ext-theme-classic-all.css（有很多套样式，可以自行选择）。在app.html中，仅需要下面这段代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>inv</title> <scriptsrc="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script> <linkrel="stylesheet"href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css"> <scripttype="text/javascript"src="app.js"></script> </head> <body></body> </html> |
一、定义应用 每一个ExtJS应用程序都由一个Application类作为开始，这个Application包含了全局设置，比如应用程序的名称，以及需要引用到的所有的models,views,controllers。下面我们创建一个商品模块应用，来管理商品信息。app.js中的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//覆盖父级包设置 Ext.Loader.setConfig({ enabled: true }); Ext.application({ autoCreateViewport: true, controllers: [ 'GoodsController'//指定应用的控制器 ], name: 'Inv'//设置应用命名空间 }); |
首先，我们调用Ext.application去创建一个Application类，传递一个名字叫Inv。这样它就能够自动的为我们创建一个全局的变量 Inv给我们，并将这个命名空间注册到Ext.Loader。这里还指定应用的控制器，说明这个应用使用哪个或者哪些控制器；这里还设置自动创建并加载显示师徒，也可以在代码中还创建了一个launch函数，这个函数里面创建了一个Viewport，来加载显示界面视图。 二、定义控制器 控制器是跟应用程序绑定在一起的，控制器所做的工作就是监听事件并作出相应，监听的事件通常是在views中，下面我们来创建一个控制器，在app/controller/下面新建一个GoodsController.js 里面代码如下：
|
1 2 3 4 5 6 7 8 9 10 |
Ext.define('Inv.controller.GoodsController', { extend: 'Ext.app.Controller', models: ['GoodsModel'],//指定模型 stores: ['GoodsStore'],//指定存储对象 views: ['GoodsGridPanel']//指定视图 }); |
控制器主要就是绑定应用的视图对象（views）和模型对象（models、stores），应用在加载的时候自动加载控制器，再由控制器来加载应用的视图和模型对象。 三、定义视图 View无非就是一个组件，通常会定义为一个Ext js component的子类。下面我们要创建一个商品列表，可以新建一个GoodsGridPanel.js,位于app/view/下。GoodsGridPanel.js代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
Ext.define('Inv.view.GoodsGridPanel', { extend: 'Ext.grid.Panel',//继承自grid.Panel title: '商品列表',//商品列表名称 store: 'GoodsStore',//存储对象，指定商品列表的数据来源 //列表组件初始化，本视图被加载的时候自动调用 initComponent: function() { var me =this; //向定义的gridPanel中注册子组件，也就是商品列表的显示列 Ext.applyIf(me, { columns: [ { xtype: 'gridcolumn', dataIndex: 'code', text: '编码' }, { xtype: 'gridcolumn', dataIndex: 'name', text: '名称' } ] }); //激活父级组件渲染到页面 me.callParent(arguments); } }); |
在app/view/还有一个Viewport.js，也是定义一个视图的，该视图继承自上面定义的GoodsGridPanel，额外定义这个视图的模板渲染显示为准和其定义相分离，以达到视图组件重用的目的。app.js中定义的自动创建视图也就是指的这个。Viewport.js的代码如下：
|
1 2 3 4 |
Ext.define('Inv.view.Viewport', { extend: 'Inv.view.GoodsGridPanel', renderTo: Ext.getBody() }); |
四、定义模型 数据模型其实包括两个部分，即store和model。其中model负责数据结构的定义，store负责数据的存取。 a) 数据模型定义 在app/model下创建一个GoodsModel.js，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Ext.define('Inv.model.GoodsModel', { extend: 'Ext.data.Model', fields: [ {name: 'code'}, {name: 'name'} ] }); |
看上面的代码，其实很简单，就是给商品数据模型定义了2个属性：code(编码)、name(名称)，就像定义数据库的字段一样。 b) 定义存储模型(静态数据) 在app/store中创建GoodsStore.js，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
Ext.define('Inv.store.GoodsStore', { extend: 'Ext.data.Store', requires: ['Inv.model.GoodsModel'], constructor: function(cfg) { var me =this; cfg =cfg || {}; me.callParent([Ext.apply({ model: 'Inv.model.GoodsModel', storeId: 'GoodsStore', data: [ { code: '00001', name: '童靴' }, { code: '00002', name: '短靴' } ] }, cfg)]); } }); |
c) 定义存储模型(从服务器获取数据) 在app/store中创建GoodsStore.js，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
Ext.define('Inv.store.GoodsStore', { extend: 'Ext.data.Store', requires: [ 'Inv.model.GoodsModel' ], constructor: function(cfg) { var me = this; cfg = cfg || {}; me.callParent([Ext.apply({ model: 'Inv.model.GoodsModel', storeId: 'GoodsStore', proxy: { type: 'ajax', url: './queryGoods', reader: { type: 'json', root: 'goodsBeanList', totalProperty: 'totalProperty' } } }, cfg)]); }, autoLoad: true //很关键 }); |
该存储模型首先调用了商品数据模型GoodsModel，然后再构造函数constructor中指定存储对象的数据模型；指定存储实例的ID；指定数据对象并在里面加了2条数据，存储模型也可以通过代理（prox）从服务端获取数据，实际工程中换一下数据来源即可。 最终页面效果 from:https://blog.csdn.net/clj198606061111/article/details/16811665
View Details以下 是 对 axios 请求 错误的处理 ( 困扰我好长时间 的 问题 终于 解决了!)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
axios.get('/user/12345') .catch(function (error) { if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } console.log(error.config); }); |
下图控制台 打印出的 结果 : from:https://blog.csdn.net/bianliuzhu/article/details/88170549
View Details|
1 2 3 4 5 6 7 8 9 10 |
var foo; alert(!foo);//undefind情况下或者null，一个感叹号返回的是true; alert(!goo);//undefind情况下，一个感叹号返回的也是true; 但是这里会报undefind的错误 var o={flag:true}; var test=!!o.flag;//等效于var test=o.flag||false; alert(test); //返回true var test2=!!o.flag1;//当里面没有对象时 alert(test2);//返回false var test3=!!b.flag;//当连b这个对象都没有时 alert(test3);//返回false |
from:https://www.cnblogs.com/EasonJim/p/6239087.html
View Details要获取当前页面URL的参数，可能大家第一个想到是使用 window.location.href 或者是document.location.href ，获取结果诸如http://www.xxx.com/?aa=xx&bb=xx ;但是其实我们需要的只是：?aa=xx&bb=xx。这种形式可以使用 document.location.search 这个属性获取。 如果我想要获取该URL后面参数aa的值该怎么弄呢？常见的方式可能是这样：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function( param ){ var url = window . location . toString (); url = url . split ('?' ); if (typeof (url [ 1 ]) == 'string' ) { url = url [ 1 ]. split ('&' ); for (i = 0 ;i < url . length ;i ++ ) { s= url [ i ]. split ("=" ); if( s[0 ] == "param" ) return s[1]; } } return null; } |
改用document.location.search和正则获取参数将使代码更加简洁：
|
1 2 3 4 5 6 7 8 |
function getParameter (sProp ) { var re = new RegExp (sProp + "=([^\&]*)" , "i" ); var a = re . exec (document . location . search ); if (a == null ) return null ; return a [ 1 ]; }; |
from:https://www.cnblogs.com/codebean/archive/2011/05/27/2059901.html
View Details