微信小程序--引入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 运行环境。”–*。大致弄明白了是个什么东西。
下载好之后,右击小程序开发者工具,点击以管理员身份运行。新建或导入项目之后,右击如图所示位置的空白处,然后点击在终端运行。
之后在终端输入npm init
一路回车, 以初始化package.json文件
成功的话你会看到工作目录里出现了一个json文件
接着在终端输入npm i @vant/weapp -S --production
装完之后会看到工作目录出现了一个新文件:
完成之后在微信开发者工具的工具栏里找到构建npm,点击
完成构建之后,工作目录会出现一个新文件
最后在详情页的本地设置里面勾选使用npm模块
完成上面的工作后,就可以引入自己喜欢的组件了!
本文地址:https://blog.csdn.net/weixin_44918193/article/details/107177647
推荐阅读
-
微信小程序的mpvue框架快速上手指南
-
前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API
-
前端笔记之微信小程序(三)GET请求案例&文件上传和相册API&配置https
-
前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
-
微信小程序中多个页面传参通信的学习与实践
-
微信小程序使用pako.js的踩坑笔记
-
微信小程序学习笔记之目录结构、基本配置图文详解
-
微信小程序学习笔记之函数定义、页面渲染图文详解
-
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
-
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解