1. Create a directory

Create the wxComponents directory in the SRC directory of your project, and create the Vant directory in that directory.

2. Install the component library

Method 1: Download the component library ZIP package

Download the latest ZIP package in the GitHub Releases section of Video-download P. After downloading, unpack the files in the dist directory and put them in the vant directory.

https://github.com/youzan/vant-weapp/releases
Copy the code

Method 2: Use NPM to install the component library

If package.json is involved, run the following commands to install Vant pervasive P. If not, run the NPM init command in the project root directory and press Enter to generate package.json.

npm i vant-weapp -S --production
Copy the code

After the installation is complete, find @vant in the project root directory node_modules, as above, find dist, copy it to wxComponents and rename it vant. Personally, I prefer method two, because I may not know which version to use in a few weeks or months.

3. Add momentum

Method 1: Import in pages. Json

Go to pages. Json and import the Vant component in globalStyle or page-specific style. If you want to use this component globally, you can import it in globalStyle usingComponents.

"usingComponents": {
  "van-button": "/wxcomponents/vant/button/index"."van-grid": "/wxcomponents/vant/grid/index"."van-grid-item": "/wxcomponents/vant/grid-item/index"."van-index-bar": "/wxcomponents/vant/index-bar/index"."van-index-anchor": "/wxcomponents/vant/index-anchor/index"
}
Copy the code

If you only need to use it individually on individual pages, you can configure usingComponents in the style of a specific page.

{
  "path": "pages/test"."style": {
    "navigationBarTitleText": "Test"."usingComponents": {
      "van-button": "/wxcomponents/vant/button/index"}}}Copy the code

App.wxss does not exist in uni-app, only after compilation will app.wxss be generated, so it needs to be introduced in style in app.vue before it can be used normally.

<style>
/* Common CSS for each page */  
    @import "/wxcomponents/vant/common/index.wxss";
</style>
Copy the code

Method 2: Directly in the page as needed reference

Since UniApp is secondary development based on VUE, @import can be directly used in the relevant page files.

Final compilation:

4. Style overlay

Sometimes the Vant style does not meet the current requirements and needs to make some simple adjustments, which can be modified according to the official website:

<van-button type="primary" block class="custom-button"</van-button>Copy the code

Overwrite styles directly by defining a class:

<style lang="scss">
.custom-button {
  .van-button {
    background-color: blue;
    border-radius: 10px;
  }
}
</style>
Copy the code

If your style is scoped, we can use the syntax in vue to overlay the style with /deep/ as follows:

<style lang="scss" scoped>
/deep/ .custom-button {
  .van-button {
    background-color: blue;
    border-radius: 10px;
  }
}
</style>
Copy the code

5. Customize the theme

If you are not satisfied with the Vant color style, you can customize the theme through the official method. Official introduction:

Appplets use Shadow DOM to implement custom components, so Vant Pervasive uses associated Css variables to implement custom themes. The content in the links can help you get a basic understanding of both concepts and avoid a lot of unnecessary confusion. Compatibility requirements for Css variables can be viewed here. For devices that do not support Css variables, custom themes will not take effect, but don’t worry, default styles will still take effect.

(1) Global customization

You can create an assets\ CSS folder at the root of your project to store style-related code. Create two new files in assets CSS: index. SCSS and the customized theme of the ant-theme. SCSS file, index. SCSS introduces the ant-theme. SCSS file.

@import "./vant-theme.scss";
Copy the code

Then add index.scss to main.js.

import Vue from 'vue'
import App from './App'
import './assets/css/index.scss' / / the introduction of the index. SCSS
// Other omissions
Copy the code

You can then customize the theme in the ant-theme. SCSS. The official configuration is as follows:

// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f8f8f8;
@background-color-light: #fafafa;
Copy the code

Finally, in the ant-theme. SCSS, you can customize the required variables according to the contents of the configuration file, as shown below, or you can use the variables in uni. SCSS:

page {
  --button-info-background-color: $uni-text-color;
  --button-info-border-color: $uni-text-color;
}
Copy the code

(2) Local customization

In practical applications, we need to customize individual components. The official methods are as follows: Method 1: Set class to set variables separately

<van-button type="info" block class="my-button">classLocally customize the theme's information button </van-button>.my-button {
  --button-info-background-color: grey;
  --button-info-border-color: grey;
}
Copy the code

Method 2: Set variables dynamically with the style property.

<van-button type="info" block :style="buttonStyle"< div style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"data() {
  return {
    buttonStyle: ` --button-info-background-color: pink; --button-info-border-color: pink; `}}Copy the code

6. Introduce the iconfont

Although there are a lot of icon apps embedded in vaant-Retry P, it certainly does not meet the requirements during actual development. Therefore, you can introduce iconFONT icon library files based on your own requirements. Create a new icon. SCSS in asssets/ CSS to manage font ICONS, and then introduce it in index.scss.

@import "./icon.scss";
Copy the code

Then copy the content seen in the above copied link and write it into icon. SCSS. Remove some unnecessary font links and other modifications and change it into the following form:

@font-face {
  font-family: 'iconfont';
  src: url('https://at.alicdn.com/t/font_998792_mo2p0a3obyo.ttf?t=1579424702259') format('truetype');
}
 
[class^="iconfont-"],
[class*=" iconfont-"] {
  font-family: 'iconfont'! important; position:relative; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; } .iconfont-edit:before {content:"\e61d";
}
.iconfont-drag:before {
  content:"\e636";
}
.iconfont-rectangle:before {
  content:"\e790";
}
Copy the code

Iconfont in [class^=”iconfont-“] and [class*=” iconfont-“] must be the same as the icon prefix. You are not advised to use the icon prefix. If the icon has changed, copy the.ttf font link to replace the original font link in font face. Copy the class icon to replace it. With the van-icon component, set class-prefix to iconfont and name to the icon name without iconfont-.

<van-icon class-prefix="iconfont" name="edit" />
<van-icon class-prefix="iconfont" name="drag" />
<van-icon class-prefix="iconfont" name="rectangle" />
Copy the code

In this way, the built-in icon can also be used normally without any impact.

<van-icon name="chat-o" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
Copy the code

7. Conclusion

The above is a record of the process of introducing Vant syndrome using UNI-App and the problems encountered. Some experience can be gained in the process of solving vant syndrome, which can be helpful for future participants.

Reference article:

  1. Uni – app is introduced into the UI component library (Vant – weapp) steps blog.csdn.net/yanghongyan…
  2. Uni-app Introduces Vant Syndrome

Liubing. Me/uniapp – use -…