1.mint-ui 移动端框架

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

A.安装

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S  // -S 表示 --save

B.引用

完整引入在 main.js 中写入以下内容：

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css' //需要注意的是，样式文件需要单独引入
import App from './App.vue'Vue.use(MintUI)new Vue({el: '#app',components: { App }
})

C.看文档直接使用

比如Action sheet 控件直接复制后报错，则查看demo实例学习使用

==>

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{"presets": [["es2015", { "modules": false }]],"plugins": [["component", [{"libraryName": "mint-ui","style": true}]]]
}

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为* Vue.use(Button)* Vue.use(Cell)*/new Vue({el: '#app',components: { App }
})

2.element-ui PC端框架

地址：http://element-cn.eleme.io/#/zh-CN

A.安装

npm i element-ui -S

B.引用

完整引入在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//需要注意的是，样式文件需要单独引入
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

C.看文档直接使用

比如有的控件直接复制后报错，则查看demo实例学习使用

字体文件引入报错处理方式：

webpack 中配置:http://element-cn.eleme.io/1.4/#/zh-CN/component/quickstart

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

==>

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为* Vue.use(Button)* Vue.use(Select)*/new Vue({el: '#app',render: h => h(App)
});

完整组件列表和引入方式（完整组件列表以 components.json 为准）

import Vue from 'vue';
import {Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Slider,Icon,Row,Col,Upload,Progress,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Loading,MessageBox,Message,Notification
} from 'element-ui';Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);Vue.use(Loading.directive);Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入 Element：

import Vue from 'vue';
import { Button } from 'element-ui';Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。

vue 常用框架【饿了么框架】相关推荐

VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
vue常用开发ui框架（app，后台管理系统,移动端）及插件
一.uni-app (app混合开发) uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码,可编译到的iOS,安卓,H5,小程序等多个平台. 官网:uni-app ...
Vue常用指令 [vue框架][web前端]
Vue常用指令 Vue常用指令: 指令: HTML标签上带有v-前缀的特殊属性, 不同的指令有不同的意义 v-bind 为HTML标签绑定属性值, 如设置href,css样式等 eg: <bod ...
Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)
文章目录前言一.Vue是什么? 二.前端核心分析 1.1.概述 1.2.前端三要素 1.3.结构层(HTML) 1.4.表现层(CSS) 1.5.行为层(JavaScript) 二.前端发展史 2 ...
vue人力管理_Vue管理后台框架选择推荐（收藏）
VUE Vue.js 是一个目前比较流行的前端框架,在业界也算很有名气,今天这里为大家罗列一下基于Vue的后端管理的框架.使用这些框架你会发现它包括了我们常用的路由,状态,交互等等,我们只需要去复用它 ...
vue + element-ui 聊天_Vue管理后台框架选择推荐
后台回复[福利]领取JavaScript零基础入门课程 Vue.js 是一个目前比较流行的前端框架,在业界也算很有名气,今天这里为大家罗列一下基于Vue的后端管理的框架.使用这些框架你会发现它包括了我 ...
推荐常用的小程序Ui框架
开源框架 1. mpvue mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 com ...
Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长每天凌晨00点00分, 第一时间与你相约每日英文 Smile and stop complaining about th ...
基于Vue的Quasar Framework 介绍这个框架UI组件很全面
基于Vue的Quasar Framework 介绍这个框架UI组件很全面基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarfra ...
什么是Vue.js？||为什么要学习流行框架||框架和库的区别？||MVC和MVVM的关系图解
什么是Vue.js? Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于W ...

vue 常用框架【饿了么框架】

1.mint-ui 移动端框架

2.element-ui PC端框架

vue 常用框架【饿了么框架】相关推荐

最新文章

热门文章