vue使⽤桌⾯Element-UI和移动端MintUI的UI框架
vue使⽤桌⾯Element-UI和移动端MintUI的UI框架
安装:npm install --save element-ui
src\main.js添加
// 引⼊Element ui
import ElementUI from 'element-ui';
import '../static/theme/index.css';
Vue.use(ElementUI)
*.vue⽂件模版⾥使⽤
<el-input class="register-input transaction-password graphical"></el-input>
---------------
Element-UI是饿了么前端团队推出的⼀款基于Vue.js 2.0 的桌⾯端UI框架,⼿机移动端有对应框架是 Mint UI 。
pc端和⼿机端的UI还是完全不⼀样的
注意:这个是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';
Vueponent(Cell.name, Cell);前端ui框架是什么意思
Vueponent(Checklist.name, Checklist);
Mint UI 包含丰富的 CSS 和 JS 组件,能够满⾜⽇常的移动端开发需要。通过它,可以快速构建出风格统⼀的页⾯,提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式⽂件,⽆需再纠结⽂件体积过⼤。
考虑到移动端的性能门槛,Mint UI 采⽤ CSS3 处理各种动效,避免浏览器进⾏不必要的重绘和重排,从⽽使⽤户获得流畅顺滑的体验。依托 Vue.js ⾼效的组件化⽅案,Mint UI 做到了轻量化。即使全部引⼊,压缩后的⽂件体积也仅有 ~30kb (JS + CSS) gzip。