Taro method of introducing vant Weapp

Taro (V2.0.5) introduced Vant Weapp, (need to download resources to the project: about the size of 322KB)

Require the following steps:

1. In/src/components下新建文件夹vant-weapp

2. Locate the GitHub Vant-weapp download package, the corresponding dist文件夹下内容copied to the new vant-weapp文件夹lower.

(Download vant-weapp embodiment, the input terminal editor: git clone https://github.com/youzan/vant-weapp.git)

3. In Pages或componentsthe corresponding file config.usingComponents, the configuration of the components required for each page. ( Note: Can not app.jsbe registered globally component. )

Example:

config = {
    usingComponents: {
        "van-icon": "../../components/vant-weapp/icon/index"
    }
}

4. Use of Vant-weappthe component tarowill automatically be corresponding components to copy dist/componentsthe next, and Vant-weappthe tool magazine assembly also dependent on /src/components/vant-weapp/wxsthe tool magazine tarois not automatically copied to distthe. So, we need to /config/index.jsfile under config configuration to add copy.patterns, let it at compile time, automatically copied to the distcorresponding lower directory.

copy: {
   patterns: [
      {
        from: 'src/components/vant-weapp/wxs/',
        to: 'dist/components/vant-weapp/wxs/'
      }
   ],
   options: {}
}

5. Taro recompilation (Example: npm run build: weapp)

* Since Vant-weappthe unit using a style px, it will be tarocompiled into rpx。by modifying the /config/index.jsfile config.Mini .postcss.pxtransform.selectorBlackList its unit conversion not to.

pxtransform: {
  enable: true,
  config: {},
  selectorBlackList: [
    /^.van-.*?$/, 
  ]
}

Note: TaroThe compiler can not automatically use the component .wxsfiles to /distthe appropriate directory (** developer tools will complain **).

To be in the config configuration addedcopy.patterns配置

例子：

copy: {
   patterns: [
      {
        from: 'src/components/vant-weapp/wxs/',
        to: 'dist/components/vant-weapp/wxs/'
      },
      {
        from: 'src/components/vant-weapp/sticky',
        to: 'dist/components/vant-weapp/sticky'
      },
      {
        from: 'src/components/vant-weapp/tabs',
        to: 'dist/components/vant-weapp/tabs'
      }
   ],
   options: {}
}