微信小程序基础入门（2）vant weapp框架引入详解及使用

CodeMagiclin

于 2021-07-29 14:55:47 发布

阅读量711

点赞数

分类专栏：小程序文章标签： javascript

本文链接：https://blog.youkuaiyun.com/MagiclinLOL/article/details/119211394

版权

这篇博客介绍了如何在微信小程序中使用 vant weapp 框架，从安装 Node.js 开始，详细阐述了创建小程序项目、npm 下载、手动配置以及组件引入的步骤。通过这个教程，读者可以学会如何在小程序中利用 vant weapp 进行开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序基础入门（2）vant weapp框架引入详解及使用

一、安装Node

使用 Vant Weapp 前，请确保你的电脑已经安装了Node，因为需要用到npm导入vant weapp相关的包，需要下载安装node，如果电脑没有的话需要百度前往node官网自行下载。

二、创建微信小程序项目

详情请看https://blog.youkuaiyun.com/MagiclinLOL/article/details/119209714?spm=1001.2014.3001.5501

三、npm下载

在项目根目录下打开cmd终端，快捷键ctrl+ ~ 。

输入如下命令进行初始化

npm init -y ，执行后将自动创建package.json文件。

再输入如下命令下载相关包。

npm i @vant/weapp -S --production

安装后，项目中会多出一个node_modules目录

四、手动配置

在 project.config.json 修改如下参数。


{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./m

最低0.47元/天解锁文章