碼上快樂

相關內容    簡體    繁體

手把手教Mint-ui

本文轉載自   查看原文   2019-04-01 16:39   4729    vue/ 前端
轉自： 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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 手把手教系列之快速傅立葉算法 手把手教Electron+vue的使用 A：手把手教Wordpress仿站（基礎） 手把手教做小偷采集 手把手教大家安裝 Intellij IDEA 手把手教Electron+vue的使用 手把手教小白安裝Erlang 手把手教，手寫AVL樹 手把手教 從0開始搭建vue 腳手架項目 手把手教系列之FIR濾波器設計
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM