工作,学习,生活,这里将会有一些记录. 备用域名:http://meisw.51099.com 注册 | 登陆
浏览模式: 标准 | 列表分类:前端

2018年九个很受欢迎的vue前端UI框架

 最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的公司项目。

 
学习的过程之中发现继最热的 React 组件库和 Angular 组件库之后,这里有很多个流行和实用的 Vue.js 组件库完善你的下一个用 Vue.JS 编写 UI 界面的应用程序。Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
 
 
 
 
 
一:Element
 
官网地址:http://element-cn.eleme.io/#/zh-CN
 
介绍:element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心。在github 上更是高达29.8k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者。
 
 
 
 
 
二:iview
 
官网地址:https://www.iviewui.com/
 
介绍:iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间,由TalkingData开发维护,有很多知名互联网企业都在使用。
 
 
 
 
 
三:vuetify
 
官网地址:https://vuetifyjs.com/zh-Hans/
 
介绍:Vuetifyjs 根据材料设计规格提供 UI 布局。 V 1.0 Alpha 版本提供了超过 80个 reusbale 组件,其中包含一个易于记忆的语义设计,它基于名称简单明了 type-as-you 的类型属性。在GitHub 上有超过 7K 的 star。
 
 
 
 
 
四:vue-strap
 
官网地址:http://yuche.github.io/vue-strap/
 
介绍:基于 Vue.js 的 Bootstrap 组件 该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件,唯一需要依赖的是: Vue.js Bootstrap CSS ,VueStrap 不依赖某个非常精确的 Bootstrap 版本。如果喜欢bootstrap的小伙伴又不想换jquery的开发方式是不二的选择。
 
 
 
 
 
 
 
五:cube-ui
 
官网地址:https://didi.github.io/cube-ui/#/zh-CN/example
 
介绍:cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
 
 
 
 
 
六:buefy
 
官网地址:https://buefy.github.io/#/
 
介绍:Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件,它提供了即装即用的轻量级组件。虽然组件选择有限,但是值得你去尝试。
 
 
 
 
 
七:vue-beauty
 
官网地址: https://fe-driver.github.io/vue-beauty/#/components/button
 
介绍:基于 ant design 的漂亮的 vue 组件库;vue-beauty 是一套基于 vue.js 和 ant-design样式 的PC端 UI 组件库,旨在帮助开发者提升产品体验和开发效率、降低维护成本。
 
 
 
 
 
八:at-ui
 
官网地址: https://at-ui.github.io/at-ui/#/zh
 
介绍:AT-UI 是一个模块化的前端 UI 框架,开发基于Vue.js 的快速和强大的 Web 界面。专门为桌面应用程序构建,AT-UI提供了一套 npm + webpack + babel 前端开发工作流程。全英文的文档对用户来说可能是具有有挑战性的,但它提供了一个体面的干净整洁的 UI 组件。
 
 
 
 
 
九:Vue-Blu
 
官网地址: https://chenz24.github.io/vue-blu/#/
 
介绍:Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。全面、灵活且强大的ui组件,API友好。
 
 
--------------------- 
作者:祈澈菇凉 
来源:CSDN 
原文:https://blog.csdn.net/qq_36538012/article/details/82152052 
版权声明:本文为博主原创文章,转载请附上博文链接!

关于vue-resource 转变成axios的过程

 在做东钿贷后系统的时候,我选择了vue-resource这个插件作为与服务器沟通工具,但是听说前端同行说vuejs2.0已经不在维护vue-resource了,vuejs2.0 已经使用了axios了。因为我刚好用的vux这个ui组件。而且vux的ajaxplugin的插件使用的就是axios。不用觉得特别浪费axios,而且以后肯定也是要用axios的。于是我就决定把现用的vue-resource换成vux自带的ajaxplugin。

vux官方文档也说了很清楚并且使用起来很简单,已经整合和vue-resource的写法一样 如下图

直接在main.js做如下修改

然后出现了json数据不接受的问题,于是我就去问人,看看别人是怎么解决的。

有个前端的朋友叫我使用箭头函数,我一开始不太明白怎么改,后来才知道他说的箭头函数就是vue http的另外一种写法,就是把传统写法改成lambda的写法 如下图,对比一下下图红色标注。就知道了。照着这样改,我把所有的都改成这样,确实有效,好使

接下来就是axios的拦截器问题,一直报连接失败,然后也确实没有ajax成功。没ajax成功就别说拦截了,于是又去问人了,一开始就有人说是this指向问题,因为axios并不是Vuejs的插件,而是第三方ajax插件,其实也不算是axios的拦截器问题,确确的说应该还是 自己vuejs的功底不扎实。最后就是this指向不对。代码如下

后面还是问了那位朋友,说把this改成Vue试试,果然好使,如下图:

问题饶了一大圈 很多时候就是方向不对,一直转转转啊,百度还说了要用axios的原始用法。于是我研究了一下,还是有问题。其实根源没解决怎么换都是错的,没有直中要害处。最近发现现在要不就没有问题,要不就是一个问题要半天甚至要一天。但总归还好,算是解决了,应该也会有点收获,唯一要记住的就是以后解决问题一定要直中关键点。要不然 方向越走越远,问题还没解决。一定要好好学习,扎实功底。

vue.js加载慢

hardcode 一些基础样式在主文档里面。 比如loading动画或者基础背景色。
在bundle.js请求没有回来之前,有较好的等待效果,而这段样式无需异步加载。

加载慢原因:
1、bundle太大,没有压缩混淆。
2、bundle没有使用异步模块加载。
3、bundle没有拆分css样式或者base64了图片。

以上都可以对症下药

--------------

 (1)给个loading菊花挡一下
(2)考虑对于页面的组件做异步加载
(4)webpack打包优化,减小打包文件体积大小
(3)vuejs路由的懒加载策略
(5)配置vue-cli,利用webpack插件完成模板预加载
(6)考虑服务器渲染首屏骨架页面,或者更复杂的服务器渲染策略ssr,官方有文档


上面5种,实现难度都是逐级增加

https://segmentfault.com/q/1010000011823965

一套Vue的单页模板:N3-admin

 https://www.vue-js.com/topic/59ba3338f3dc95c4771d5cfc

vue-router路由懒加载(解决vue项目首次加载慢)

懒加载:----------------------------------------------------?

    也叫延迟加载,即在需要的时候进行加载,随用随载。

为什么需要懒加载?

    像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

    简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!

如何实现?

    懒加载写法:

        

  非懒加载的路由配置:

        

  

 还有一点:是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问题修改下就好了

     如下图:

          

  找到build下面的webpack.prod.conf.js   添加   publicPath:"./",

 
 

 https://www.cnblogs.com/lijuntao/p/7777581.html