zoukankan      html  css  js  c++  java
  • 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

    srcmain.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。

  • 相关阅读:
    记一次ntp反射放大ddos攻击
    除了binlog2sql工具外,使用python脚本闪回数据(数据库误操作)
    vmware linux虚拟机忘记密码怎么办
    flask(二)
    flask(一)
    发布一个Django项目
    nginx的使用
    redis的下载及使用
    Linux虚拟机没有IP的解决办法
    Mariadb的安装与使用
  • 原文地址:https://www.cnblogs.com/zdz8207/p/vue-Element-UI-MintUI.html
Copyright © 2011-2022 走看看