uni-app開發微信小程序引入UI組件庫(Vant-weapp)步驟

uni-app開發微信小程序引入UI組件庫(Vant-weapp)步驟

• 這裏以vant-weapp爲例
• uni-app官方文檔介紹引入組件的方法

1. 新建相關目錄

• 根目錄下建立 wxcomponents
• wxcomponents下新建vant目錄

• 建立完成後的目錄結構

2. 項目中引入vant-weapp組件

• 在vant-weapp的GitHub Releases版塊下載最新的zip包
• 解壓下載文件,將dist目錄拷貝到剛纔建立vant目錄中
  

3. 頁面中使用引入的UI組件

1. 在App.Vue文件中style部分引入UI組件庫的 樣式文件
   

@import "/wxcomponents/vant/dist/common/index.wxss";

1. 在pages.json配置文件中,註冊頁面須要的組件

{
    "path": "pages/index/index",
    "style": {
        "usingComponents":{
            "van-button": "/wxcomponents/vant/dist/button/index"
        },
        "navigationBarTitleText": "首頁"
    }
}