号称目前最火的前端框架Vue,它有什么显著特点呢?

JavaScript023

号称目前最火的前端框架Vue,它有什么显著特点呢?,第1张

1、Vue是什么 Vue.js 是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架。 Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue.js 是一套用于构建用户界面的渐进式框架。 2、Vue的特点 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合移动/PC 端开发 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目 3、Vue与其他前端框架的关系 借鉴 angular 的模板和数据绑定技术 借鉴 react 的组件化和虚拟 DOM 技术 4、Vue的现有插件 vue-cli: vue 脚手架,用于搭建项目的骨架 vue-resource(axios): ajax 请求 vue-router: 路由 vuex: 状态管理 vue-lazyload: 图片懒加载 vue-scroller: 页面滑动相关 mint-ui: 基于 vue 的 UI 组件库(移动端) element-ui: 基于 vue 的 UI 组件库(PC 端) 5、学习Vue的思想改变

Vue的中心思想是数据驱动,像远古时代的老前辈jQuery是结构驱动。

大家回忆下以前我们使用jQuery写代码的时候,经常是这样写的:

$("#myDiv").html("HelloWorld")

这些写法首先要获取Dom节点,也就是Dom结构,然后再修改数据更新结构的内容,使用jQuery的一个很大的目的就是为了去简化Dom的操作,而使用Vue就大不一样了,Vue的做法就是直接this.msg=HelloWorld,然后msg就会自动的同步到结构上,我们所要关心的是数据内容的改变,而不再去关心如何操作Dom结构了。

总结一句话:不要在想着怎么操作DOM,而是想着如何操作数据!!

前端框架百花齐放、争奇斗艳,令人眼花缭乱。大神们一言不合就整一个框架出来,另小白们无所适从。下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀。

(1)Element 饿了么 vue 2.0后台UI框架 (Star:18382)

https://github.com/ElemeFE/element

(2)iview组件库 (Star:10186)

iView 主要服务于 PC 界面的中后台业务,很优秀的组件库,可惜不适合移动端

https://github.com/iview/iview

https://iviewui.com/

(3)vux 基于Vue和WeUI的移动UI组件 (Star:9762)

Vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

https://github.com/airyland/vux

https://vux.li/

(4)Mint-UI 饿了么移动端组件库 (Star:8062)

由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库

https://github.com/ElemeFE/mint-ui

(5)vue-admin 管理面板UI框架 (Star:6289)

https://github.com/vue-bulma/vue-admin

(6)vue-material为 Vue.js 打造的 Material 风格的组件 (Star:4550)

https://github.com/vuematerial/vue-material

https://vuematerial.github.io/#/

(7)vue-strap基于 Vue.js 的 Bootstrap 组件 (Star:4400)

https://github.com/yuche/vue-strap

http://yuche.github.io/vue-strap/

(8)KeenUI 基于Material Design的UI (Star:3041)

https://josephuspaye.github.io/Keen-UI/

(9)vonic (Star:2276)

https://github.com/wangdahoo/vonic/

https://wangdahoo.github.io/vonic/docs/#/

(10)Radon-ui awe大神最近写的一套UI (Star:791)

https://github.com/luojilab/radon-ui

(11)N3-components 基于N3ui (Star:781)

https://github.com/N3-components/N3-components

(12)vue-carbon (Star:739)

https://github.com/myronliu347/vue-carbon

上文转自于 https://www.cnblogs.com/tkzc2013/p/8127294.html

更多 vue 框架参考 https://www.awesomes.cn/subject/vue# 应用-框架

优秀的 github demo 推荐 https://github.com/bailicangdu

1.什么是elementUI?

ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架

大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面

2.elementUI使用

https://element.eleme.cn/#/zh-CN/component/installation

3.elementUI优化

默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中

这样就导致了我们的项目体积比较大, 用户访问比较慢

4.如何优化

为了解决这个问题, elementUI推出了按需导入, 按需打包. 也就是只会将我们用到的组件打包了我们的项目中

没有用到的组件不会被打包

https://element.eleme.cn/#/zh-CN/component/quickstart

1.什么是MintUI?

MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装,让我们能够专注于业务逻辑而不是UI界面

2.mintUI使用

http://mint-ui.github.io/#!/zh-cn

3.注意点: MintUI和ElementUI的第一个不同, 就是在MintUI中需要通过Vue.component来告诉Vue我们需要使用

1.什么是Vant?

在使用MintUI的过程中发现有很多的坑,所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款 基于Vue的移动端UI框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装,进行了美化,让我们能够专注于业务逻辑而不是UI界面

Vue.use只能use插件,不能use组件

那么如何将一个组件封装成一个插件呢?

1.Vue.use()做了什么事情?

Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用

2.什么时候需要定义插件?

当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件

例如: 网络加载指示器

3.如果自定义一个插件?

https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6