关于小程序:微信小程序内如何导入vantUI组件

简略记录一下如何在微信小程序内引入 vantUI 组件（亲测无效）

1. 以新建一个微信小程序我的项目为例，新建一个小程序后，关上微信开发者工具
   
   在关上后的终端下输出
   npm i @vant/weapp -S --production
   按下回车

此时，我的项目根门路下会呈现一个 node_modules 文件夹，如下图所示

如果未呈现该文件夹，能够点目录文件夹上的刷新按钮，即可刷新列表

2. 实现 node_modules 依赖装置后，须要批改 app.json 文件，批改如下

将上图中所框选局部删除即可

3. 我的项目根目录下新建 package.json 文件, 文件地位及文件内容如下

{
  "name": "mp-demo1",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {"@vant/weapp": "^1.0.6"},
  "prettier": {
    "printWidth": 120,
    "semi": false,
    "singleQuote": true
  }
}

4. 按照下图中所示的操作步骤，执行 npm 操作

5.npm 结束后，我的项目根门路下会呈现一个 miniprogram_npm 文件夹，如下图所示，代表构建胜利

6. 配置小程序应用 npm 模块，操作步骤如下图所示，勾选应用 npm 模块选项

顺带附上如何在页面下援用 UI 组件：

咱们以应用一个 button 组件为例

1. 首先 app.json 下须要定义全局组件的引入配置，如下图所示

"usingComponents": {"van-button": "@vant/weapp/button/index"},

2. 关上咱们须要应用到 button 组件的界面，咱们以模板我的项目下的 index 页面为例，关上页面并在须要应用到的中央退出如下标签（具体标签援用形式能够参照官网文档）官网文档

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

ctrl + s 后，页面即可呈现方才援用的 button 组件成果，大抵成果如下图所示

—That’s all. 如有写的不好的中央，请不吝指出，多谢浏览。