• 售前

  • 售后

热门帖子
入门百科

微信小步伐中使用vant框架的详细步骤

[复制链接]
李冰381 显示全部楼层 发表于 2022-1-8 06:11:19 |阅读模式 打印 上一主题 下一主题
目次


  • 1.打开我们小步调的项目目次,然后打开文件所在的位置。
  • 2.初始化项目文件
  • 3.输入初始化项目标命令
  • 4.安装依靠
  • 5.使用组件
1.说到vant框架信赖各人应该并不陌生了吧,做过移动端开发的小同伴们应该都知道它吧。
2.Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已连续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。
3.我们废话不多说,直接进入本日的主题。我们该如安在微信小步调中去使用vant组件库呢!
起首
我们先打开vant weapp网站,这里我将网站地址给各人。Vant Weapp 网址
各人打开网站后呢,点击快速上手。上面就有步调教你如安在小步调中使用vant组件库。
下面呢就给各人介绍一下我是怎样去安装使用vant UI组件库的。

1.打开我们小步调的项目目次,然后打开文件所在的位置。



2.初始化项目文件

这里呢我通过 cmd 窗口初始化


3.输入初始化项目标命令
  1. npm init
复制代码
此时你会发现你的目次多出了package.json文件


4.安装依靠

4.1 通过 npm 安装vant/weapp
  1. npm i @vant/weapp -S --production
复制代码
4.2 安装 miniprogram
  1. npm i miniprogram-sm-crypto --production
复制代码
安装完毕后,你会发现你的目次中又多些文件。

4.3 修改 app.json
将 app.json 中的
  1. "style": "v2"
复制代码
去除,缘故起因是小步调的新版根本组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式杂乱。
4.4 修改 project.config.json
开发者工具创建的项目,
  1. miniprogramRoot
复制代码
默认为
  1. miniprogram
复制代码
  1. package.json
复制代码
在其外部,npm 构建无法正常工作。须要手动在
  1. project.config.json
复制代码
内添加如下设置,使开发者工具可以精确索引到 npm 依靠的位置。
  1. {
  2.   ...
  3.   "setting": {
  4.     ...
  5.     "packNpmManually": true,
  6.     "packNpmRelationList": [
  7.       {
  8.         "packageJsonPath": "./package.json",
  9.         "miniprogramNpmDistDir": "./miniprogram/"
  10.       }
  11.     ]
  12.   }
  13. }
复制代码
  1. 4.5 构建 npm 我们点击左上角的工具栏
复制代码

构建乐成后会出现下面的画面

4.6然后点击右上角的详情---本地设置----使用npm模块


5.使用组件

我这里在全局内里注册一个按钮,然后使用它。先去app.json中注册

这里我任意找一个页面用一下这个按钮组件。

各人可以看到我使用乐成了。
到此这篇关于微信小步调中使用vant框架的详细步调的文章就介绍到这了,更多干系小步调使用vant框架内容请搜索脚本之家从前的文章或继续欣赏下面的干系文章希望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作