超详细!微信小程序导入Vant Weapp组件库
Vant Wepp组件库轻量、可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式。
Vant Weapp组件库官方文档–请用电脑查看哦
以下是微信小程序导入Vant Weapp组件库的步骤:
需要注意的是,导入Vant Weapp需要npm支持,也即需要安装npm包。如果微信小程序pages目录下没有package.json文件,如下图所示:
此时安装npm 包会失败,这时需要先运行npm init命令,具体过程如下:
-
鼠标右击pages目录,选择最后一项打开终端
在终端输入 npm init 命令后一直按回车,直至生成package.json文件。 -
接着继续输入 npm install 命令并按回车,即可成功安装npm包。
-
然后在终端中继续输入命令 npm i @vant/weapp -S --production 即可安装vant/weapp组件库。
-
我们回到资源管理器目录,将app.json文件中的 “style”: “v2” 去掉。
-
并在 project.config.json 文件内添加如下配置:
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
-
接着点击开发者工具中的菜单栏:工具 --> 构建 npm
并在小程序右侧,详情 --> 本地设置中,勾选上“使用npm模块”。
即可生成miniprogram_npm文件。由于node_modules文件的内容与miniprogram_npm文件的重复,此时我们可以删除node_modules文件以减小内存,之后也不会影响Vant Weapp组件的使用。
-
如果一直按照上述步骤进行,没有做其他改动的话,按照以下步骤即可成功使用Vant Weapp组件:
这里以按钮组件为例:
在index.json文件里写如下代码:
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
在index.wxml文件里写如下代码:
<van-button type="primary">按钮</van-button>
即可成功显示Vant Weapp的按钮组件啦(✪▽✪)
到这里就结束啦,感谢您的支持/玫瑰~