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

你說uni-app是什么

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

懂行的人是不是覺得牛逼？想了解更多，進入官網吧

 

我說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不深，有些坑沒去整理，還是留給你們~~~