基于Vue的Ui框架

饿了么公司基于vue开的的vue的Ui组件库

Element Ui 基于vue pc端的UI框架

http://element.eleme.io/

MintUi 基于vue 移动端的ui框架

http://mint-ui.github.io/#!/en

mintUI的使用:

1.找官网

2.安装 npm install mint-ui -S -S表示 --save

3.引入mint Ui的css 和 插件

import Mint from 'mint-ui';

Vue.use(Mint);

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

4.看文档直接使用。

在mintUi组件上面执行事件的写法

@click.native

element UI的使用:

1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart

2.安装 cnpm i element-ui -S -S表示 --save

3.引入element UI的css 和 插件

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

4、*webpack.config.js 配置file_loader http://element.eleme.io/1.4/#/zh-CN/component/quickstart

{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}

5.看文档直接使用。

element UI组件的单独使用(第一种方法):

1、cnpm install babel-plugin-component -D

2、找到.babelrc 配置文件

{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}

改为 注意:

{
"presets": [["env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

3、
import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)

element UI组件的单独使用(第二种方法):

import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)

引入对应的css

import 'element-ui/lib/theme-chalk/index.css';

如果报错: webpack.config.js 配置file_loader

{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}

基于Vue的Ui框架的更多相关文章

  1. element-ui iview-admin 都是基于vue的ui框架

    element-ui iview-admin 都是基于vue的ui框架

  2. 基于vue的UI框架集锦

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

  3. 基于vue 的 UI框架 -- Mint UI

    网址: http://mint-ui.github.io/docs/#!/zh-cn 官网: http://mint-ui.github.io/#!/zh-cn vue2.0实例: http://bl ...

  4. 基于Vue的UI框架element el-table表格的自定义排序

    html部分: <el-table-column prop="phoneCache" label="手机缓存包编号" align="center ...

  5. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  6. 5款vue前端UI框架

    Vue.js是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue ...

  7. 基于vue的nuxt框架cnode社区服务端渲染

    nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub ...

  8. Unity——基于UGUI的UI框架

    基于UGUI的UI框架 一.Demo展示 二.关键类 MonoSingle 继承MonoBehaviour的单例基类:做了一些特殊处理: 保证场景中必须有GameInit名称的物体,所有单例管理器脚本 ...

  9. 很受欢迎的vue前端UI框架

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

随机推荐

  1. SWIFT Enumeration(2)

    之前记录了Swift Enumeration(1),这篇算是它的延续吧,继续说下Enumeration,看以下定义 enum TrainStatus { case OnTime case Delay( ...

  2. Jsonp的实现

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. 由于同源策略,一般来说位于 server1.com 的网页无法与不是 serv ...

  3. HDOJ 1061 Rightmost Digit

    找出数学规律 原题: Rightmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  4. URAL - 1397:Points Game (博弈,贪心)

    Two students are playing the following game. There are 2· n points on the plane, given with their co ...

  5. C# 使用GZip对字符串压缩和解压

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  6. test20181004 苹果树

    题意 分析 对每个点维护子树所能达到的dfn最大值.最小值.次大值.次小值,然后就可以计算原树中每个点与父亲的连边对答案的贡献. 如果子树中没有边能脱离子树,断掉该边与任意一条新加的边都成立,答案就加 ...

  7. spket插件的安装与使用完整图文版

    下载最新破解版的spket1.6.18(见下面附件) 对于目前的MyEclipse的插件安装是很简单的,把spket1.6.18破解版.zip解压后直接复制到MyEclipse安装目录的dropins ...

  8. web开发的一些总结

    现在我们是在互联网的时代,到处可以使用internet 这些年的发展,让we 成为了当前开发的主流,包括现在好多的移动端开发, 很多也是使用web 页面进行呈现,因为web 拉近了你我之间的距离.对于 ...

  9. 实战:mysql检查物理磁盘中的二进制日志文件是否有丢失

    版权声明:日常札记,乐于分享 https://blog.csdn.net/yangzhawen/article/details/32103555 场景:有时候由于磁盘损坏或人为原因错误删除了磁盘中的二 ...

  10. dell support

    部門營業時間 電話號碼訂單支援中小型企業 (員工不多於 500名 )00852-3416-0910 9:00 - 18:00 訂單編號:  810607806 訂單日期:  26/11/2014 客戶 ...