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

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

element-ui
Element - 網站快速成型工具
http://element-cn.eleme.io/#/zh-CN

安裝：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還是完全不一樣的

基於vue.js的移動端UI框架mint-ui
https://mint-ui.github.io/#!/zh-cn
MintUI使用文檔vue2
https://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。