vue的ui框架有哪些

elementUI

2.iview

这个UI框架是对标elementUI而生的，最大优点是官方有桌面版配置工具，只需使用鼠标就可以构建一个基于iview+vue的应用，免去手巧命令的烦恼。最新的版本为3.x。建议对elementUI框架审美疲劳的同学可以尝试这个呦。官方网站的文档和例子基本上你是小白也能学明白。

3.zanUI

由有赞团队开源的移动端UI框架，对于移动电商应用的开发来说，有很多写好的页面组件，可以直接拿来使用。当然zanUI的样式也是很好看的。当然也有PC端组件，和小程序端。zanUI一共分三个版本，针对移动端的为vantUI，PC端为zentUI，小程序端为Vant Weapp。

4.onsenUI

onsenUI的组件样式

这个UI框架是国外开发，所以UI设计，很多都是迎合国外用户，对于国内用户，可能不是很好看，但是做为主打海外市场的应用，这个UI框架还是值得去使用的。

5.mintUI

这个是一个中规中矩的移动端UI框架，适合移动端的绝大部分场景。

6.museUI

这个框架还是比较有特色的，不管怎么说，这类不随波逐流的UI框架已经很少见了，但是还是建议使用在主打海外市场的应用上。

一、MintUI

饿了么公司前端团队开发的基于vue的移动端组件库，功能齐全，在git上有15.8k的star，非常不错的一款移动开发工具。

官方地址：#!/en

二、Vant

有赞前端团队开发移动端组件库，还支持小程序。在git上有14k的star，完善的文档和强大的技术团队支撑。

三、MUI

意为原生UI，轻量不依赖任何第三方JS库。官方介绍说mui框架有效的解决了HTML5在手机app上运行的性能和体验不好的问题，是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。

四、cube-ui

滴滴团队开源。扩展性强，可以方便地基于现有组件实现二次开发。体验极致，以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。

基于vue的移动端组件库还有很多其他的，选择合适自己app项目的就是最好的，上面这几个框架基本可以应付绝大部分的场景了。

一 安装

1.  npm 安装

     npm i mint-ui@1 -S 

2  使用 

importVuefrom'vue'

importMintUIfrom'mint-ui'

import'mint-ui/lib/style.css'

importAppfrom'./App.vue'

Vue.use(MintUI)

newVue({

el:'#app',

components: { App }

})

安装 babel-plugin-component：

  npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

3 使用 Popup 组件

（1） 在你的vue文件里面引入这个组件  

   import { MessageBox, Popup, Button } from "mint-ui" 

    其他两个是其他的组件，需要的话 直接在后面加入就可以了

（2） 复制粘贴 组件

          <mt-popup v-model="popupVisible"

                  position="center"

                  class="dddddd"

                  modal=false> 

  <div>  内容</div>

            <mt-button type="primary "

                       @click="btnPop"

                       class="btnPop">我知道了</mt-button>

        </mt-popup>

1如果d窗需要设置  border-radius 这个属性 但是组件里面的div设置不生效的话，可以试试给组件起个class名字 然后再去设置，因为的我的不管用。

2.组件里面的div可以正常写你所需要的样式和需求

3，mt-button也是mint-ui的组件  可以用按钮的方法 关闭d窗

4，需要在data里面设置初始值为false 然后 methods 里面正常写d窗打开关闭的方法就可以了 

第一天

---