欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序--引入vant框架学习笔记

程序员文章站 2022-07-04 22:31:50
看一下官方对Vant Weapp的介绍:Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。Vant框架已经设计好了大量的UI组件,在开发小程序的时候可以引入定义好的组件,极大的方便了小程序的开发。引入Vant框架首先需要配置与电脑配置相应的Node.js环境。去官网直接下载即可。Node.js官网之前没有接触过Node.js,所以查阅资料了解了下。开看句简单的解释:“Node.js 是能够在服务器端运...

看一下官方对Vant Weapp的介绍:Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

Vant框架已经设计好了大量的UI组件,在开发小程序的时候可以引入定义好的组件,极大的方便了小程序的开发。

引入Vant框架首先需要配置与电脑配置相应的Node.js环境。去官网直接下载即可。Node.js官网

之前没有接触过Node.js,所以查阅资料了解了下。开看句简单的解释:“Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。”–*。大致弄明白了是个什么东西。

下载好之后,右击小程序开发者工具,点击以管理员身份运行。新建或导入项目之后,右击如图所示位置的空白处,然后点击在终端运行。
微信小程序--引入vant框架学习笔记
之后在终端输入npm init 一路回车, 以初始化package.json文件
微信小程序--引入vant框架学习笔记成功的话你会看到工作目录里出现了一个json文件
微信小程序--引入vant框架学习笔记
接着在终端输入npm i @vant/weapp -S --production
微信小程序--引入vant框架学习笔记装完之后会看到工作目录出现了一个新文件:
微信小程序--引入vant框架学习笔记
完成之后在微信开发者工具的工具栏里找到构建npm,点击
微信小程序--引入vant框架学习笔记
完成构建之后,工作目录会出现一个新文件
微信小程序--引入vant框架学习笔记
最后在详情页的本地设置里面勾选使用npm模块
微信小程序--引入vant框架学习笔记
完成上面的工作后,就可以引入自己喜欢的组件了!

本文地址:https://blog.csdn.net/weixin_44918193/article/details/107177647