zoukankan      html  css  js  c++  java

  • 手把手教Mint-ui

    转自：https://www.jianshu.com/p/db776b507065
     

    教程简介

    • 1、阅读对象
      本篇教程适合新手阅读，老手直接略过
    • 2、教程难度
      初级，本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢
    • 3、Demo 地址：https://github.com/githubchen001/vue-lesson
      查看 08、Mint-UI的使用

    正文

    一、什么是 Mint UI

    当我们一听到 XX UI 就可以知道它是一个界面相关的框架，玩过前端的人至少听说过 Bootstrap「它是 Twitter 开源的一个 css/html 工具包」, 而 Mint UI 是饿了么团队开源的一款基于 Vue.js 的移动端组件库

    二、Mint UI 的使用方法

    1、使用 cdn 的方式引入

    我们在使用 Vue.js 的时候不一定非要使用 vue-cli 来创建一个单页面应用，很可能们使用别的技术栈来搭配 Vue.js「vue只是使用它的模版，减少恶心的动态拼串」，那么我们使用 cdn 直接引入的方式是最好不过了

    引入方法

    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>

    当然我们也可以使用 yarn/npm/bower 等来安装 Mint UI 模块，然后在 html 界面中引入

    这种方式其实没有什么好说的，就像我们在以前的 vue demo 中引入 vue.js 是一样的，废话不多说了，来两个例子直观感受一下吧

    使用几个组件练练手

    仿手机 webapp 淘宝登录界面

    来张效果图看一下

    • 1、手淘 webapp 登录界面
     
    手淘的登录界面
    • 2、使用 Mint UI 仿写的手淘 webapp 登录界面
     
    仿写手淘的登录界面

    怎么样还原度还是挺高的吧，当然这个效果不使用 Mint UI 完全可以实现「实现难度也是非常低的，这里使用 Mint UI 实现此效果有点大材小用，只是为了演示效果」

    • 3、核心代码
    <div id="mydiv">
    <!-- 提醒栏 -->
    <div class="tipslogin">
      <span>你需要登录才能继续仿问</span>
      <span class="closeSpan">关闭</span>
    </div>
    <div class="imgDiv">
      <img src="./imgs/tblogo.png" alt="" class="logo">
    </div>
    <!-- 操作区域 -->
    <div class="operateDiv">
      <!-- 账号 -->
      <mt-field  :placeholder="accountPlaceholder"  v-model="uname" class="myinput"></mt-field>
      <!-- 密码 -->
      <mt-field  v-show="isUserAccount" placeholder="请输入密码"  type="password" v-model="upass" class="myinput"></mt-field>
      <!-- 短信验证码 -->
      <mt-field  v-show="!isUserAccount" placeholder="校验码" v-model="getCode" class="myinput">
          <span class="getCode">获取短信验证码</span>
      </mt-field>
      <!-- 免费注册块 -->
      <div class="registerDiv">
        <span>免费注册</span>
        <span v-show="forgetPassShowroNot">忘记密码</span>
      </div>
      <!-- 登录和切换登录方式块 -->
      <div>
        <mt-button size="large" class="mybutton" @click.native="login">登录</mt-button>
        <mt-button size="large"  type="primary" class="mybutton" @click.native="changeLoginMethod">{{defaultAccountText}}</mt-button>
      </div>
    </div>
  </div>

    这个没有什么好说的，完整的代码请看 https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/usecdntaobaologin 注释非常清楚，不解释

    2、在 Vue-cli 中使用 Mint UI

    我们使用 vue-cli 来创建的组件化项目，其实也有三种引入 Mint UI 的方式

    （1）、直接在 index.html 中引入，这个和上面的方式一样，不过有一些小区别，我们来感受一下

    我们使用 vue-cli 来创建一个项目，过程就不演示了，以前说过，我们直接看核心代码

    • 1、在 index.html 中使用 cdn 引入 mint-ui 相关的 css 和 js
    <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mint-ui-demo</title>
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  </head>
  <body>
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script>
    <!-- built files will be auto injected -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <div id="app"></div>
  </body>
</html>

    方式一，配置 externals mint-ui

    • 2、配置 webpack.base.conf.js，添加如下代码
     
    配置 mint-ui

    我们在 webpack.base.conf.js 的 module.exports 中配置 externals，externals 是把组件公开出去，供全局使用

    PS：在这里我们要注意一点 externals 配置的 key:vaule 形式的，这里的 Value 好多文章中说是随意配置的，但是亲过自己亲测，这里不能随便配置，必须要和相关 js 暴漏出来的模块名字一模一样，对于 mint-ui 来说是 MINT，我们可以看一下 mint-ui.js 的源码

     
    mint-ui部分源码

    看到了吧，mint-ui 暴露出去供我们使用的是 MINT，所以 externals 的 value 一定是这个值「不能随意配置」

    • 3、修改 main.js
    import MINT from 'mint-ui'
Vue.use(MINT)

    添加以上两句，引入 mint-ui ，并且使用它

    经过以上三部，我们就使用 cdn 的方式把 mint-ui 配置完了，我们来测试一下

    • 4、在 App.vue 中的模版中添加以下代码
    <template>
  <div id="app">
    <mt-button type="default">default</mt-button>
        <mt-button type="primary">primary</mt-button>
        <mt-button type="danger" >danger</mt-button>
    <router-view/>
  </div>
</template>
    • 5、运行查看结果
     
    show-vue-cli-cdn-mint-ui

    怎么样，完美的显示出了 mint-ui 的 Button 效果

    方式二 配置 externals vue

    • 除了以上方式，我们还可以在 externals 中直接配置 vue 不用配置 mint-ui ，

    关于 externals 可以看 webpack 官方说明：外部扩展，这里不细说了解一下即可，我们来看看如何在配置---配置方式如下

     
    externals-config-vue

    我们这时配置一下 Vue 并不配置 mint-ui

    • 同时去掉 main.js 中的 import 和 Vue.use(MINT)
     
    remove-use-mint
    • 由于我们修改了 webpack.base.conf.js 所以一定要重新启动服务，果看结果
     
    show-vue-cli-cdn-mint-ui.png

    怎么样，效果一毛一样，为什么呢？个人是这样理解的，mint-ui 是依赖于 vue 的，如果我们没有在 externals 配置 vue，只是配置了 mint-ui「这里 import MINT from 'mint-ui' 都是 cdn 上的全局都一样」 没有把 vue 当全局暴露出去，那么我们在每个界面 import Vue from 'vue' 其实是 vue-cli 把我们下载到 node-modules 中的 vue ,而在本地 vue 使用其它 组件的时候，一般情况下我们是要 import 和 Vue.use(xxx) 的「具体要看组件的 js 有没有提供这个方法」

    但是如果我们在 externals 中配置了 vue ，相当于我们 import Vue from 'vue' 都是 cdn 上的「和本地 node-modules 中的 vue 没有关系，此时的 vue 和 mint 真正的都是 cdn 上的」，此时的情况就像在 html 中直使用 cdn 直接引入 vue 再引入 mint-ui 是一样的，所以我们不必在 externals 再去配置 mint-ui，效果也能实现「个人建议如果使用的话，使用第二种方案」

    （2）、使用模块化全局引用

    以上说了在 vue-cli 中使用 cdn 来使用 mint-ui 的两种方式，其实使用 cdn 来减小包的大小和优化速度是不错的一种选择，下在我们介绍第二种使用模块化全局引入 mint-ui

    • 1、首先我们要使用一模块我们就要安装它「cdn 除外」,使用 yarn/npm 来安装，这里使用 yarn「好处以前在 React 中说过了，这里不过多了说」
     
    yarn-add-mint-ui

    在这里我们要注意一下，样式文件需要单独引入

    • 2、使用 mint-ui

    我们打开 main.js 输入以下内容「如图中红框所示」

     
    import-mint-js-and-css

    经过以上两步配置，我们就把 mint-ui 全局配置好了，我们在任何组件中就可以使用 mint-ui 了

    • 3、测试一下

    我们就来几个按钮和 Navbar 的功能，废话不多说了直接看效果图

     
    golbal-vue-cli

    基本上就是这个效果，具体代码可以看源码 https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/mint-ui-vue-cli-global-use-demo

    （3）、使用模块化按需引用

    在上面的例子，我们只使用了 button 和 Navbar 组件，但是我们却引入了整个 mint-ui 组件，这有多么大的浪费呀「简直是一种奢侈，大材小用」，能不能我们需要什么组件再引入什么组件，实现按需加载呢「以达到减少项目体积的目的」，当然可以了，我们来看看这种方式

    • 1、使用 vue-cli 来创建一个名为 mint-ui-cli-single-import-demo 的项目

    当然我们要使用 mint-ui ，我们肯定要安装 mint-ui

    yarn add mint-ui
    • 2、要实现按需加载 mint-ui 组件，我们需要借助 babel-plugin-component 组件来只引入需要组件，我们来安装一下 babel-plugin-component
    yarn add install babel-plugin-component --dev
    • 3、配置 .babelrc
     
    config-single-mint-ui-babelrc.png

    我们来运行一下项目 yarn run dev 然后输入 localhost:8080 很不幸，报错了，我们看一下命令行中的错误如下，是我们要使用 ES6 的标准，却没有安装 babel-preset-es2015 ，废话不多说，我们安装一下即可

     
    can't-find-es2015
    • 4、安装 babel-preset-es2015
    yarn add babel-preset-es2015 --dev

    我们完成安装以后，再运行一下，就不会报上面的错误了

    • 5、我们来引入按钮来测试一下，我们在 main.js 引入 Button 组件
     
    import-button-and-use

    这样我们引入了 Button 并且全局注册了 Button 我们就可以在什何组件中使用 Button 了，官方说注册组件可以使用 Vue.component(Component.name, Component) 和 Vue.use(Component) 两种方式实现，但是亲测只有 Vue.component(Component.name, Component) 这种注册方式起作用而 Vue.use(Component) 是无效的「会报错，说组件没有正确的注册」

    • 6、使用 Button 组件，我们直接在 App.vue 组件中使用 Button
     
    button-in-appvue
    • 7、运行一把，查看结果
     
    show-single-button-result

    怎么样除了我们熟悉的 vue-cli 帮我们创建的 HelloWorld 以外，我们看到了 mint-ui 创建的两个按钮「完美显示出来了」

    PS: 这里注意一下，我们如果想要给 mt-button 这种自定义组件添加点击事件，不能使用传统的 @click 而要使用 @click.native

    这样我们就把按需加载 mint-ui 中的组件配置完了，不过根据路由的思想，虽然我们可以把路由配置在 main.js 中，但是为了统一管理 vue-cli 帮我们把路由配置在单独的文件中--- router/index.js 中，仿照路由的配置，我们把 mint-ui 也单独配置在一个文件夹中「方便我们管理,当然这不是必须的，你完全可以在 main.js 中去一个个按需引入组件」，这里我们创建一个 mint-ui/index.js 文件「如下所示」

     
    add-mint-ui-indexjs

    我们把引入需要的 mint-ui 组件全部配置在 mint-ui/index.js 文件中

    • 8、配置 mint-ui/index.js 文件

    由于 mint-ui 是基于 vue 的，所以我们要先相入 vue ，这和 router 是一样的「这里以 Button 为例子来引入，其实就是把上面 main.js 是配置的放到 mint-ui/index.js 文件中」

    # mint-ui/index.js

import Vue from 'vue'
import { Button } from 'mint-ui';
Vue.component(Button.name, Button);
    • 9、修改 main.js

    由于我们把 main.js 中引入 Button 的工作放在了 mint-ui/index.js 中了，所以我们现在把原有的 main.js 中引入 Button 的方法就要去掉「替换成引入 mint-ui/index.js 即可」

    # main.js
import Vue from 'vue'
import App from './App'
import router from './router'

// import { Button } from 'mint-ui';
// Vue.component(Button.name, Button);

import './mint-ui/index.js'
...
    • 10、查看结果
     
    show-single-button-result

    和上面在 main.js 中引入 Button 组件是一毛一样的，所以推荐大家在使用 mint-ui 的时候建议在一个单独文件中去引入

    • 11、我们再来几个组件试试

    为了方便起见，我们把原来 App.Vue 中和 HelloWorld 组件中的内容干掉「template、style、js 都把内容清空」

    我们在 HelloWorld 组件中分别引入 mint-ui 的 Button、Action sheet 等「需要什么我们看文档即可，文档非常的详细」

    直接在 mint-ui/index.js 引入需要的组件即可

    # mint-ui/index.js

import Vue from 'vue'
import { Button,Actionsheet } from 'mint-ui';

Vue.component(Button.name, Button);
Vue.component(Actionsheet.name, Actionsheet);

    我们可以看到除了 Button，我们又引入了 Actionsheet「依次类推，想用什么组件就在这里引入并且注册即可」，我们来看看 Actionsheet 的用法

    <mt-actionsheet
  :actions="actions"
  v-model="sheetVisible">
</mt-actionsheet>

    actions 属性绑定一个由对象组成的数组，每个对象有 name 和 method 两个键，name 为菜单项的文本，method 为点击该菜单项的回调函数。sheetVisible 是组件默认是否显示，直接看代码「在 HelloWorld 中添加」

    <template>
  <div class="hello">
    <mt-button type="primary" size="large">primary</mt-button>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      actions:[],
      // 设置为 true 默认就自动弹出 actionSheet
      sheetVisible:true
    }
  },
  created() {
    this.actions = [
      {name:'拍照'},
      {name:'打开相册'}
    ]
  }
}

    没有什么好说的，和官方介绍的差不离，在这里 actions 中的 method 不是必须「但是实际情况是肯定是有的，不然 actionsheet 有个毛意义呢」

    • 12、运行一下，查看结果
     
    use-actionsheet-demo
    • 13、我们来实现，点击按钮显示 actionsheet 并且每个 actionsheet 中的菜单有对应的方法
     
    add-method-to-actionsheet

    我们再给 Button 添加点击事件

    <mt-button 
type="primary" 
size="large" 
@click.native="showActionSheet">
    primary
</mt-button>
    • 14、运行一把看结果
     
    show-actionsheet-result

    还不错吧，这里基本就差不多了，其它的组件我们照着文档使用就可以了，没什么难的「文档非常的详细」

    具体代码看：源代码

    三、使用 mint-ui 仿微信界面

    以上说我们说了 mint-ui 的三种引入方式，并且介绍了组件的使用，这没有什么好说的，需要什么组件看官网上有的话直接拿来用。学了就要使用，在这里我们使用 mint-ui 来仿一个微信的基本框架「使用 vue-cli + 按需加载 mint-ui 组件的方式」，所谓无图无真相，我们来看一下效果图吧

    效果图

     
    we-chat-demo.gif

    大概说一下我是如何拆分组件的，具体可以看源码，注释非常清楚

     
    wecaht-component-01

    其它类似发现，我的中的条目都是通用的组件「就不一一列举了」，这个 Demo 中的组件抽到的粒度还不是最细的，大家可以自行再封装组件

    源码地址： https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/mint-ui-wechat-demo

    四、总结

    本节我们说了 mint-ui 的使用，其实不管什么组件都是类似的使用方式，还是非常 easy 的，大概总结一下

    1、在 vue-cli 中使用 mint-ui 有三种方式

    • 使用 cdn 引入，注意配置 webpack.base.conf.js
    • 全局使用，包会非常大，效率当然不是很高
    • 按需使用--推荐使用「建议我们把使用三方组件单独配置到一个文件中，这里注意官方说单个组件可以使用 Vue.use(xxx)，亲测不可以「看了源码，确实没有实现 install 方法」，我们只能使用 Vue.component(Component.name,Component) 这种方式」

    2、使用 mint-ui 仿微信

    • 使用了组件化开发，父子组件之间的传数据，方法等
    • 使用到了 mint-ui 的 tabs 组件，index-list 等组件
    • 本 demo 只是为了练习，在兴趣的可以再完善「这里只是一个抛砖引玉」，并添加上我们以前讲的手把手教Vue--路由功能，实现界面跳转传参，把其它界面模仿完成

    本节所有 demo 演示地址：https://githubchen001.github.io/vue-lesson/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/index.html
  • 相关阅读:
    代理（reGeorg）
    弱口令爆破技巧
    无法解析@NotBlank
    LC 1723. Find Minimum Time to Finish All Jobs (dp+二分)
    帝国cms 联合多张表查询
    php 根据白名单替换字符转中的链接 封装的函数
    php 正则匹配域名后的整个链接和只匹配域名
    JVM系列（一）：垃圾回收之MinorGC,MajorGC和FullGC的区别
    spring事务的执行原理
    java基础系列(八)：Semphore,CountDownLatch和CyclicBarrier的使用
  • 原文地址：https://www.cnblogs.com/Wang-Vei/p/10637269.html
Copyright © 2011-2022 走看看