uni-app項目導入第三方組件庫muse-ui

你說uni-app是什麼

我說，uni-app是一套基於vue.js開發跨平臺應用的前端框架，可編譯多個平臺，好比：Android、IOS、H五、微信小程序、支付寶小程序、頭條小程序、百度小程序

懂行的人是否是以爲牛逼？想了解更多，進入官網吧

 

我說muse-ui是什麼

官方說，Muse UI 是一套 Material Design 風格開源組件庫，旨在快速搭建頁面。它基於 Vue 2.0 開發，並提供了自定義主題，充分知足可定製化的需求。

我以爲muse ui組件都很是美觀，若是可以導入到uni-app並開發項目，觀感美麗一棟，能夠去官網走走

 

如何導入muse ui

 找到uni-app項目目錄，在此目錄上打開終端，npm安裝muse-ui

隨便建立一個.vue文件吧

我就寫個例子，導入Button組件，首先要導入muse-ui模塊從中取出Button組件，在script裏添加代碼

import {Button} from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';

而後在components添加組件

/*lwButton能夠本身自定義組件名，可是取名有不少限制*/
components:{
    lwButton:Button
}

Button組件導入好了，開始應用，看看效果，點擊按鈕出現波紋效果，帥不帥！！

也能夠不一樣顏色的，設置屬性color='primary'

你想導入其它的組件的話，導入同上，好比我還想導入Alert組件

 看到這裏，你也許會想，可不能夠一次性的導入全部組件，我跟你講，「很差意思，沒有這個，只能一個一個導入」，若是你僅僅只須要它們的樣式，卻是能夠一次性引入全部組件的樣式，用法跟bootstrap組件庫差很少，class直接添加組件的名稱（雖然很雞肋）

好比，我只要導入樣式就行，可是隻針對單一標籤組成的組件纔有用，代碼以下

<template>
    <view class="content">
        <view>
            <view class="mu-alert mu-success-color mu-inverse">
                若是你成癮muse-ui，何嘗不可一試
            </view>
        </view>
        
    </view>
</template>

<script>
    import 'muse-ui/dist/muse-ui.css';
</script>

 

效果圖：

 

我沉淫muse-ui不深，有些坑沒去整理，仍是留給大家~~~