菜鸟读文档-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标签栏)

2020.11.10更新

对于上图中出现的构建失败问题

大家可以参考这个 issue