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";

2. 在pages.json配置文件中,注冊頁面需要的組件

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