基于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. iOS开发UI之Quartz2D使用(绘制基本图形)

    iOS开发UI篇—Quartz2D使用(绘制基本图形) 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 ...

  2. CentOS安装setup

    如果在命令行运行 setup 提示乜有安装该命令,那么就需要先安装一下setup命令 执行:yum install setuptool #可以发现执行setup后不全,再安装一个用于系统服务管理yum ...

  3. Python入门——第一个Python程序

    1.1 Hello Python书写步骤 步骤一:新建文本文档文件,修改名称为hello.py 步骤二:使用记事本打开文件,书写程序内容如下: print("hello python&quo ...

  4. makefile for opencv

    makefile #################################################### # Generic makefile - 万能Makefile # for ...

  5. LMS算法

    一.感知器算法和LMS算法 感知器和自适应线性元件在历史上几乎是同时提出的,并且两者在对权值的调整的算法非常相似.它们都是基于纠错学习规则的学习算法. 感知器算法存在如下问题:不能推广到一般的前向网络 ...

  6. centos yum出现no module named yum

    运行yum出现如下错误 There was a problem importing one of the Python modules required to run yum. The error l ...

  7. ATOM & Sublime Text 下MarkDown插件功能比较

    ATOM & Sublime Text 下MarkDown插件功能比较 作者:net66 更新日期:2016-6-14 10:50 [一] 编辑器 Sublime Text3 vs Atom ...

  8. C语言命令行解析函数:getopt/getopt_long

    命令行工具下的参数选项有两种,长选项和短选项.短选项以-开头,后面跟单个字母:长选项以--开头,后面可跟多个字母. 一. getopt() 1.功能:解析命令行短选项参数 2.函数原型: #inclu ...

  9. 详解SID之终结篇

    今天测试某款监控软件时遇到一个比较棘手的问题,这款软件需要在被监控端安装客户端程序.成功在第一个节点安装好客户端后问题出现了,在其他节点安装时报错无法安装.软件报的错误信息无从下手且系统日志也看不出什 ...

  10. Spring Cloud Netflix项目进入维护模式

    任何项目都有其生命周期,Spring Could Netflix也不例外,官宣已进入维护模式,如果在新项目开始考虑技术选型时要考虑到这点风险,并考虑绕道的可能性. 原创: itmuch  IT牧场 这 ...