精华内容
下载资源
问答
  • Mint UI

    2019-12-22 09:52:28
    Mint UI 官网 引入 Mint UI 你可以引入整个 Mint UI,或是根据需要仅引入部分组件。...import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI) 按需引入 借助babel-plu...

    Mint UI 官网

    引入 Mint UI

    你可以引入整个 Mint UI,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Mint UI。

    完整引入

    在 main.js 中写入以下内容:

    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    
    Vue.use(MintUI)

    按需引入

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

    首先,安装 babel-plugin-component:

    npm install babel-plugin-component -D

    然后,将 .babelrc 修改为:

    {
     
      "plugins": [["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]]]
    }
    // 表示自动引入 mint-ui 组件,样式自动引入

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

    import Vue from 'vue'
    import { Button, Cell } from 'mint-ui'
    import App from './App.vue'
    
    // 将组件映射成全局的标签,标签名是 mt-button
    Vue.component(Button.name, Button)
    Vue.component(Cell.name, Cell)
    /* 或写为
     * Vue.use(Button)
     * Vue.use(Cell)
     */
    
    new Vue({
      el: '#app',
      components: { App }
    })

    其中 Button.name值是mt-button,通过查看源码可得

    使用:

     <div>
        <mt-button type="primary">primary</mt-button>
      </div>

    上面一种是将组件映射成标签,可以将组件映射成函数

    使用:

    <template>
      <div>
      
        <mt-button @click.native="handleClick">点击触发 handleClick</mt-button>
       
      </div>
    </template>
    
    <script>
      import { MessageBox } from 'mint-ui'
      export default {
        methods:{
          handleClick(){
           MessageBox.alert('操作成功').then(action => {
           console.log('成功')
    });
          }
        }
      }
    </script>

     

    展开全文
  • MintUI

    2020-06-01 08:46:47
    Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,...

    Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性:     

     使用文档: http://mint-ui.github.io/#!/zh-cn

    •  Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
    •  真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
    •  考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
    •  依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

     

     

    npm i mint-ui --save

     

     

      1. 引入全部组件

        如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:

    import Mint from 'mint-ui';
    Vue.use(Mint);
    import 'mint-ui/lib/style.css'; 

      2. 按需引入

        如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:

    import Button from 'mint-ui/lib/button';
    import 'mint-ui/lib/button/style.css';
    Vue.component(Button.name, Button);

        上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。

     

     

    参照:https://www.cnblogs.com/stella1024/p/7771334.html 

     

     

    Vue lib-flexible px转化rem,适配移动端

     

    1.安装lib-flexible ;进入终端;进入项目所在文件夹;执行代码

    npm install lib-flexible --save
    

    2.在src/main.js中引入lib-flexible

    import 'lib-flexible/flexible'
    

    3.安装px2rem-loader;进入终端;进入项目所在文件夹;执行代码

    npm install px2rem-loader 
    

    4.配置px2rem-loader 这里是重要的一步
    4.1在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:

    const cssLoader = {
      loader: 'css-loader',
      options: {
        minimize: process.env.NODE_ENV === 'production',
        sourceMap: options.sourceMap
      }
    }
    
    const px2remLoader = {
      loader: 'px2rem-loader',
      options: {
        remUnit: 75
      }
    }
    

    4.2同时,在generateLoaders方法中添加px2remLoader

    function generateLoaders (loader, loaderOptions) {
      const loaders = [cssLoader, postcssLoader, px2remLoader]
      if (loader) {
       loaders.push({
          loader: loader + '-loader',
          options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
          })
        })
      }
    ...
    

    4.3启动项目,一切ok! 注:不转换rem方法 PX大写

     

     

    展开全文
  • mint ui

    2020-12-29 12:42:44
    第一步:安装Mint UI 包 有两种方式npm cdn 我使用的是下载好的安装包 链接:https://pan.baidu.com/s/1mmTG5MVhKM1mvPRbPim3Tg 提取码:hp1z 复制这段内容后打开百度网盘手机App,操作更方便哦muti-ui包 解压...

    使用软件:Visual Studio Code

    第一步:安装Mint UI 包

     

    方法一

     

    我使用的是下载好的安装包

    链接:https://pan.baidu.com/s/1mmTG5MVhKM1mvPRbPim3Tg 提取码:hp1z 复制这段内容后打开百度网盘手机App,操作更方便哦 muti-ui包

            解压后如下图

        

    链接:https://pan.baidu.com/s/1bnXs6WeaDpqARRJAQUoXnA 提取码:snb7 复制这段内容后打开百度网盘手机App,操作更方便哦  css样式包

     解压后如下图

     

    第二,在public文件夹中新建styles文件,在把样式reset.css复制到文件夹里。

    第三,用Visual Studio Code打开文件scaffolding,效果如下

         

    第四,用ctrl+j 或者ctrl+反引号打开终端,并输入npm run serve

    加载完后如图,然后按住ctrl单击链接

    效果如下图

    因为mint-ui是移动端,所以需要把尺码换成手机来看效果

    步骤如下,按f12键,选中手机图标

     

    第二种 引用组件Mint ui

    1下载scaffolding,解压(先有一个脚手架项目)

    2安装mint-ui 组件库  ----保证有网

       进入scaffolding内,然后在输入框输入cmd,进入命令行界面

       输入 npm install --save mint-ui 

    3.打开vscode,选择scaffolding文件

    4.在src/main.js中配置MInt ui

            1.导入mint-ui所有组件

               import MintUI from 'mint-ui';

            2.导入所有样式表文件

                import 'mint-ui/llib/style.min.css'

           3.通过vue.use()方法将mintui注册为vue的插件

              Vue.use(MintUI)

          5.打开控制台 ctrl+j/,打开后,输入 npm run serve

               This relative module was not found 找不到此相对模块

         6.ctrl+点击,打开组件网页

    出现这种报错,说明你没有把东西放进去,造成的原因有很多种,比如单词写错了,单词少写了字母,或者语句格式不对等

     

    展开全文
  • Mint UI 使用文档本文将介绍 Mint UI 的安装方式和基本的用法。npm 安装推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。npm i mint-ui -SCDN目前可以通过 unpkg.com/mint-ui 获取到最新版本的...

    Mint UI 使用文档

    本文将介绍 Mint UI 的安装方式和基本的用法。

    npm 安装

    推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

    npm i mint-ui -S

    CDN

    目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

    Hello world

    通过 CDN 的方式我们可以很容易地使用 Mint UI 写出一个 Hello world 页面。

    按钮

    new Vue({

    el: '#app',

    methods: {

    handleClick: function() {

    this.$toast('Hello world!')

    }

    }

    })

    如果是通过 npm 安装,并希望配合 webpack 使用,请阅读下一节:快速开始。

    关于事件绑定

    在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 .native 修饰符:

    Click Me

    从易用性的角度出发,我们对 Button 组件进行了处理,使它可以监听 click 事件:

    Click Me

    但是对于其他组件,还是需要添加 .native 修饰符。

    展开全文
  • 一.Mint UI是什么 Mint UI 是饿了么团队开源的一款基于 Vue.js 的移动端组件库 Bootstrap「它是 Twitter 开源的一个 css/html 工具包」 二.引入 Mint UI 1、使用 cdn 的方式引入 ...MintUI</t...
  • UI库_MintUi

    2019-11-08 16:41:52
    UI库_MintUi
  • MintUI使用方式

    2021-06-08 16:10:23
    MintUI使用方式 mintUI APi网址 使用node环境进行安装使用 安装指令npm i mint-ui -S 使用脚手架vue-cli创建项目 npm install -g vue-cli vue init webpack projectname 或者: 使用指令npm install -g @vue/cli...
  • shop-mintui.rar

    2021-07-15 20:00:40
    vue 通过mint ui 封装几个组件,有菜单栏,导航栏,轮播图... 喜欢的朋友可以下载
  • MintUi踩坑记录

    2021-04-17 12:25:21
    在使用MintUi的时候,其用法和ElementUi类似,但是在按需使用MintUi按照官网的步骤无法正常运行,以下是注意点: 第一个注意点:在按需导入MintUi时,还是需要完整导入MintUi,即需要在mian.js中添加: import MintUI from '...
  • Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧
  • 1.引入mint-ui1).使用 vue-clinpm install -g vue-clivue init webpack projectname2). 部分引入在main.js中写入:import 'mint-ui/lib/style.css'import { Tabbar, TabItem } from 'mint-ui';2.引入tabbar在main.js...
  • 该存储库包含Mint UI网站的源代码。 本地运行 要在本地运行此网站,您需要先安装 。 安装依赖项: $ mint install Mint - Installing dependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━...
  • Mint UI教程

    2021-04-03 18:16:20
    Mint UI教程1 介绍2 npm 安装3 CDN4 导入方式5 基本使用5 按需引入 1 介绍 Mint UI基于 Vue.js 的移动端组件库. 本章节介绍的是基于webpack的开发方式 2 npm 安装 npm i mint-ui -D 3 CDN 目前可以通过 unpkg....
  • Mint UI文档

    2019-09-25 03:39:05
    一、Mint UI的安装和基本用法。 1.NPM:npm i mint-ui -S 建议使用npm进行安装,因为它可以与webpack无缝协作。 2.CDN:从unpkg.com/mint-ui获取最新版本,并在您的页面中导入JavaScript和CSS文件 <!-- impor.....
  • Vue+mintUI的demo

    2018-06-30 19:47:12
    Vue+mintUI的demo,想快速开发前端页面,不错的选择。。。
  • 在vue中,Mint UI是饿了么团队开源的一款基于Vue.js的移动端组件库。Mint UI包含丰富的CSS和JS组件,能够满足日常的移动端开发需要;通过它,可以快速构建出风格统一的页面,提升开发效率。Mint UI是饿了么团队开源...
  • vue+mintUI h5页面demo

    2019-08-08 15:29:04
    本项目采用vue+mintui构建的移动端h5页面,完整的项目拿来就可以写新项目
  • MintUI 组件和Mui

    2020-02-17 11:20:29
    MintUI 组件 Github 仓储地址 Mint-UI官方文档 安装Mint UI npm install --save mint-ui 导入所有MintUI组件: import MintUI from 'mint-ui' 导入样式表:这里 可以省略 node_modules 这一层目录 import 'mint...
  • hereis-mintui-demo-master.zip
  • Mint UI 安装

    2019-03-06 09:31:53
    1.安装 cnpm i mint-ui -S 2.引入---在main.js中引入 --------整体引入------------ import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' ...
  • 一、mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验。mint已支持vue2.0。 二、安装和...
  • 主要介绍了Vue 使用 Mint UI 实现左滑删除效果CellSwipe,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • mint ui修改默认样式

    千次阅读 2018-01-27 16:21:40
    mint ui修改样式,css样式自定义 有个项目在使用mint ui,踩的坑也比较多,毕竟是高度定制化的组件,所以有许多的组件需要自己修改样式。 1.mint ui的组件再次添加的样式不生效 这个清空有两种:直接绑定的一级元素...
  • Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。自 6...
  • Vue Mint UI 组件 用例,纯前端,不包含后端, # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build ...
  • 主要介绍了Mint UI组件库CheckList使用及踩坑总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Mint UI提供了丰富CSS和JS组件,用于构建移动应用程序。 有了它,您可以更快地创建具有凝聚力的样式的网页。 按需加载。 仅在需要时才导入组件及其样式表,才能使您真正摆脱过多的文件大小。 为了避免不必要的重画和...
  • 1.在浏览器的调试工具中找到mintui的默认样式,此处以.mint-header-button为例,如图: 2.重新定义一遍内部样式,比如 .mint-header-button.is-left { text-align: right; } 3.方法2容易对组件样式造成污染...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,743
精华内容 3,497
关键字:

mintui