手把手教Mint-ui

時間  2019-11-09
標籤 手把手 mint 简体版
原文   原文鏈接
轉自： https://www.jianshu.com/p/db776b507065
 

教程簡介javascript

  • 一、閱讀對象
    本篇教程適合新手閱讀，老手直接略過
  • 二、教程難度
    初級，本人水平有限，文章內容不免會出現問題，若是有問題歡迎指出，謝謝
  • 三、Demo 地址：https://github.com/githubchen001/vue-lesson
    查看 0八、Mint-UI的使用

正文css

1、什麼是 Mint UI

當咱們一聽到 XX UI 就能夠知道它是一個界面相關的框架，玩過前端的人至少據說過 Bootstrap「它是 Twitter 開源的一個 css/html 工具包」, 而 Mint UI 是餓了麼團隊開源的一款基於 Vue.js 的移動端組件庫html

2、Mint UI 的使用方法

一、使用 cdn 的方式引入

咱們在使用 Vue.js 的時候不必定非要使用 vue-cli 來建立一個單頁面應用，極可能們使用別的技術棧來搭配 Vue.js「vue只是使用它的模版，減小噁心的動態拼串」，那麼咱們使用 cdn 直接引入的方式是最好不過了前端

引入方法vue

<!-- 引入樣式 --> <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 界面中引入java

這種方式其實沒有什麼好說的，就像咱們在之前的 vue demo 中引入 vue.js 是同樣的，廢話很少說了，來兩個例子直觀感覺一下吧node

使用幾個組件練練手python

仿手機 webapp 淘寶登陸界面

來張效果圖看一下webpack

  • 一、手淘 webapp 登陸界面
 
手淘的登陸界面
  • 二、使用 Mint UI 仿寫的手淘 webapp 登陸界面
 
仿寫手淘的登陸界面

怎麼樣還原度仍是挺高的吧，固然這個效果不使用 Mint UI 徹底能夠實現「實現難度也是很是低的，這裏使用 Mint UI 實現此效果有點大材小用，只是爲了演示效果」git

  • 三、核心代碼
<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 註釋很是清楚，不解釋

二、在 Vue-cli 中使用 Mint UI

咱們使用 vue-cli 來建立的組件化項目，其實也有三種引入 Mint UI 的方式

（1）、直接在 index.html 中引入，這個和上面的方式同樣，不過有一些小區別，咱們來感覺一下

咱們使用 vue-cli 來建立一個項目，過程就不演示了，之前說過，咱們直接看核心代碼

  • 一、在 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

  • 二、配置 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 必定是這個值「不能隨意配置」

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

添加以上兩句，引入 mint-ui ，而且使用它

通過以上三部，咱們就使用 cdn 的方式把 mint-ui 配置完了，咱們來測試一下

  • 四、在 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>
  • 五、運行查看結果
 
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

  • 一、首先咱們要使用一模塊咱們就要安裝它「cdn 除外」,使用 yarn/npm 來安裝，這裏使用 yarn「好處之前在 React 中說過了，這裏不過多了說」
 
yarn-add-mint-ui

在這裏咱們要注意一下，樣式文件須要單獨引入

  • 二、使用 mint-ui

咱們打開 main.js 輸入如下內容「如圖中紅框所示」

 
import-mint-js-and-css

通過以上兩步配置，咱們就把 mint-ui 全局配置好了，咱們在任何組件中就可使用 mint-ui 了

  • 三、測試一下

咱們就來幾個按鈕和 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 組件，這有多麼大的浪費呀「簡直是一種奢侈，大材小用」，能不能咱們須要什麼組件再引入什麼組件，實現按需加載呢「以達到減小項目體積的目的」，固然能夠了，咱們來看看這種方式

  • 一、使用 vue-cli 來建立一個名爲 mint-ui-cli-single-import-demo 的項目

固然咱們要使用 mint-ui ，咱們確定要安裝 mint-ui

yarn add mint-ui
  • 二、要實現按需加載 mint-ui 組件，咱們須要藉助 babel-plugin-component 組件來只引入須要組件，咱們來安裝一下 babel-plugin-component
yarn add install babel-plugin-component --dev
  • 三、配置 .babelrc
 
config-single-mint-ui-babelrc.png

咱們來運行一下項目 yarn run dev 而後輸入 localhost:8080 很不幸，報錯了，咱們看一下命令行中的錯誤以下，是咱們要使用 ES6 的標準，卻沒有安裝 babel-preset-es2015 ，廢話很少說，咱們安裝一下便可

 
can't-find-es2015
  • 四、安裝 babel-preset-es2015
yarn add babel-preset-es2015 --dev

咱們完成安裝之後，再運行一下，就不會報上面的錯誤了

  • 五、咱們來引入按鈕來測試一下，咱們在 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) 是無效的「會報錯，說組件沒有正確的註冊」

  • 六、使用 Button 組件，咱們直接在 App.vue 組件中使用 Button
 
button-in-appvue
  • 七、運行一把，查看結果
 
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 文件中

  • 八、配置 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);
  • 九、修改 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' ...
  • 十、查看結果
 
show-single-button-result

和上面在 main.js 中引入 Button 組件是一毛同樣的，因此推薦你們在使用 mint-ui 的時候建議在一個單獨文件中去引入

  • 十一、咱們再來幾個組件試試

爲了方便起見，咱們把原來 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 有個毛意義呢」

  • 十二、運行一下，查看結果
 
use-actionsheet-demo
  • 1三、咱們來實現，點擊按鈕顯示 actionsheet 而且每一個 actionsheet 中的菜單有對應的方法
 
add-method-to-actionsheet

咱們再給 Button 添加點擊事件

<mt-button type="primary" size="large" @click.native="showActionSheet"> primary </mt-button>
  • 1四、運行一把看結果
 
show-actionsheet-result

還不錯吧，這裏基本就差很少了，其它的組件咱們照着文檔使用就能夠了，沒什麼難的「文檔很是的詳細」

具體代碼看：源代碼

3、使用 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

4、總結

本節咱們說了 mint-ui 的使用，其實無論什麼組件都是相似的使用方式，仍是很是 easy 的，大概總結一下

一、在 vue-cli 中使用 mint-ui 有三種方式

  • 使用 cdn 引入，注意配置 webpack.base.conf.js
  • 全局使用，包會很是大，效率固然不是很高
  • 按需使用--推薦使用「建議咱們把使用三方組件單獨配置到一個文件中，這裏注意官方說單個組件可使用 Vue.use(xxx)，親測不能夠「看了源碼，確實沒有實現 install 方法」，咱們只能使用 Vue.component(Component.name,Component) 這種方式」

二、使用 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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程