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

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

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

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

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

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

你可能感兴趣的:(项目)