【健康云平台练习小项目开发】小程序vant组件库的引入

淩亂°似流年 2022-11-12 08:28 221阅读 0赞

**一、背景**

> 这是本人的参与的一个省级大创项目的系统开发部分。本人于2020年暑假已开发简单的基本框架（包括vue、小程序、ssm框架（spring boot迭代）），由于各种原因一直拖到现在还没完善。本人打算在考研准备之余进行此项目以及TGAM项目[spring boot练手项目][spring boot]的重构，并记录一些常见的Java开发技术和问题记录，并且将其放在GitHub[项目传送门][Link 1]，希望大家多多支持！！多多点赞、关注！

文章参考：[微信小程序使用vant][vant]

**二、本次记录**

1.  cmd到微信小程序的项目文件之下，`npm init`'进行npm依赖包的引入。引入成功之后，将会生成node\_modules文件夹，里面将会有node的一些依赖包。（前提是已安装node.js以及npm [node安装][node])  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center]
2.  使用微信小程序工具构建npm，并配置npm环境，并生成minprogram\_node  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 1]  
    点击详情，本地设置，配置npm设置。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 2]
3.  愉快地引入vant组件库了，在 .json文件中进行引入，wxml中进行组件使用。[vant组件库][vant 1]

{ 
      "component": true,
      "usingComponents": { 
        "van-button": "/miniprogram_npm/vant-weapp/button",
        "van-field":"/miniprogram_npm/vant-weapp/field"
      }
    }

1.  echarts引入

参考：[微信小程序引入echarts][echarts]

**三、其他部分整理**

后续更新…

[spring boot]: https://blog.csdn.net/qq_44654974/article/details/113447118?spm=1001.2014.3001.5502
[Link 1]: https://github.com/lyf712
[vant]: https://www.jianshu.com/p/54ed83b6c81a
[node]: https://blog.csdn.net/zjh_746140129/article/details/80460965
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/2279b0a5c733416aac89b72bafc8e3a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/fa644a6ded364ef2a6c11842ccad3595.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/0686e74f5e7e405fa0abbe043042e57a.png
[vant 1]: https://vant-contrib.gitee.io/vant-weapp/#/quickstart
[echarts]: https://www.jianshu.com/p/b95f2d8eb107