uni-app development program introduction of small micro-channel UI component library (Vant-weapp) Step

uni-app development program introduction of small micro-channel UI component library (Vant-weapp) Step

• Here at vant-weapp A Case Study
• uni-app official document describes the method of introducing components

1. Create a new directory-related

• Creating wxcomponents the root directory
• wxcomponents under the new vant directory

• Create a directory structure after completion

  

2. Project component introduced vant-weapp

• In vant-weapp of GitHub Releases section to download the latest zip package
• Unzip the downloaded file, copy the dist directory to the directory just created vant
  

3. Use the introduction page of UI components

1. style UI component part of the introduction of the style file library file in App.Vue
   

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

1. In pages.json configuration file, registration page required components

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