vue使用桌面Element-UI和移动端MintUI的UI框架

vue使用桌面Element-UI和移动端MintUI的UI框架

element-uiElement - 网站快速成型工具http://element-cn.eleme.io/#/zh-CN

安装：npm install --save element-ui

src\main.js添加// 引入Element uiimport ElementUI from 'element-ui';import '../static/theme/index.css';Vue.use(ElementUI)

*.vue文件模版里使用

---------------Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机移动端有对应框架是 Mint UI 。pc端和手机端的UI还是完全不一样的

基于vue.js的移动端UI框架mint-uihttps://mint-ui.github.io/#!/zh-cnMintUI使用文档vue2https://mint-ui.github.io/docs/#/zh-cn2

注意：这个是https开头的，http开头的经常会打不开。

// 安装

# Vue 1.x

npm install mint-ui@1 -S

# Vue 2.0

npm install mint-ui -S

// 引入全部组件

import Vue from 'vue';

import Mint from 'mint-ui';

Vue.use(Mint);

// 按需引入部分组件

import { Cell, Checklist } from 'minu-ui';

Vue.component(Cell.name, Cell);

Vue.component(Checklist.name, Checklist);

Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。