小程序项目创建与Vant-UI引入

沐千熏2024-06-01 12:40

一，创建小程序项目

AppID可先用测试号；

模板来源选择 '全部来源' ，'基础' 。模板一定JS开头的；

vant-weapp 官网

vant-Weapp

二，下载vant-weapp 组件

1，在新项目中打开 '调试器'；

2，点击终端，点击添加；

3，在终端中输入下载命令,一般选择npm安装

通过 npm 安装

npm i @vant/weapp -S --production

通过 yarn 安装

yarn add @vant/weapp --production

安装 0.x 版本

npm i vant-weapp -S --production

三，构建npm

1，点击工具

2，找到 '构建npm'，点击；

3，构建成功后会生成package-lock.json 与package.json文件里面有关于vant-weapp的配置

package-lock.json

javascript 复制代码

{
  "name": "miniprogram-1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "@vant/weapp": "^1.11.6"
      }
    },
    "node_modules/@vant/weapp": {
      "version": "1.11.6",
      "resolved": "https://registry.npmmirror.com/@vant/weapp/-/weapp-1.11.6.tgz",
      "integrity": "sha512-a3heReWYT2gNdsyj6x1hBwsM8V8NrjcPAmle86NH2CD2V/i/h0le75piW6KntSfOPCwekVWMBKhysNrBpJeKdw=="
    }
  }
}

package.json

javascript 复制代码

{
  "dependencies": {
    "@vant/weapp": "^1.11.6"
  }
}

四，页面应用

1，在页面文件夹中的 .json文件中引入，多个引入用 (,)分割；

javascript 复制代码

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

2，页面代码使用

javascript 复制代码

      <van-button type="primary">主要按钮</van-button>
      <van-button loading type="info" loading-text="加载中..." />