菜鸟读文档-Vant Weapp-1(引入Vant Weapp)

前言

阅读优秀工程师撰写的文档对于像我这样的菜鸟而言, 是学习技术的最好途径. 但很多时候, 由于我与优秀工程师之间存在的巨大技术差距, 很多在优秀工程师眼中稀松平常的行为, 在我这个菜鸟眼中却显得十分新奇, 进而变成了我眼中的"坑".

在此, 我想记录下这一系列"踩坑"的历程, 既是对自己成长的记录, 又可以为他人在阅读文档时提供些许帮助

目前我的技术水平

• 了解CSS基本布局和基本美化
• 了解JavaScript基本语法
• 小程序自定义组件相关知识一窍不通

正文

接下来一段时间要和大家一起阅读的是微信小程序组件库Vant Weapp的文档

引入整个组件库

我们首先来到Vant Weapp文档快速上手页面中的安装部分

好家伙, 步骤一的第一句就包含着一个"坑"

需要注意的是package.json和 node_modules必须在 miniprogram目录下

这句话实际对应着以下操作:

1. 在miniprogram文件夹下打开命令行(因为我演示使用的是小程序代码片段, 路径可能有点不同)

   

2. 输入命令(前提是已经成功安装npm)

   # 按默认选项创建package.json文件
   npm init --yes
   

   

接下来才是输入文档中引入Vant Weapp的命令(仍然是在该路径中)

npm i @vant/weapp -S --production

然后按照文档接下来的步骤进行操作即可完成引入

预告

使用tabbar组件

tabbar导航栏是微信小程序不可或缺的一部分, 我们首先就来到Vant Weapp文档的Tabbar标签栏页, 但没想到的是, 这会是一系列"坑"的开端…

菜鸟读文档-Vant Weapp-2(引入Tabbar标签栏)