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

微信小程序基础入门（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": "./miniprogram/"
      }
    ]
  }
}

打开微信开发者工具，点击本地设置，勾选使用npm模块选项， 随后点击左上角