TS uses the vant weapp framework configuration after building the WeChat applet

 1. npm install

# 通过 npm 安装
npm i @vant/weapp -S --production

2. Configure app.json

Remove the app.json  "style": "v2" , the new version of the applet's basic components forcefully add many styles, it is difficult to cover, if not closed, the styles of some components will be confused.

3. Modify project.config.json

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

Note: Due to the file structure problem of the miniprogram directory created by the new version of developer tools, the file directory built by npm is miniprogram_npm, and the development tool will create the file name of miniprogram_npm in the current directory by default, so the configuration of the new version of miniprogramNpmDistDir is './ ' can

4. Build npm package

Open the WeChat Developer Tools, click  Tools -> Build npm , and check  the option to use npm modules  . After the build is complete, you can import components.

 In the new version, there is no need to set, local configuration, use npm module

ts build project, you also need to set step 5

5. typescript support

If you use typescript to develop applets, you also need to do the following to get a smooth development experience.

# 通过 npm 安装
npm i -D miniprogram-api-typings

Please path/to/node_modules/@vant/weappmodify it to  node_modules the directory where @vant/weapp is located in the project. (I haven't changed it)

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    },
    "lib": ["ES6"]
  }
}

I still can't build npm after configuring this, use the online saying to remove the following configuration: build it and then add it

"useCompilerPlugins": [
   "typescript"
],

6.app.json introduces components

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

7.wxml use

<van-button type="primary">按钮</van-button>