微信小程序 安装依赖 vant

1. 前言

小程序一直没写过什么文章,主要是因为小程序比较简单,没有什么大问题,但是可能对于自学能力不强的人,尤其基本不看官网,第一反应是百度找文章的人来说,还是有点难度的,今天开始写点文章吧

---

2. 为什么需要依赖

1. 目前主流应该是原生小程序开发,因为小程序已经自带了非常丰富的组件,还有非常丰富的API,
2. 总有些场景自己写比较麻烦,需要第三方依赖的,反正你可以会使用第三方依赖,但工作中不用,也没啥影响,多学点

---

3. package.json

1. 安装依赖肯定需要package.json配置文件,但是小程序是不自带的,所以需要自己安装
2. 可以在小程序根目录下,比如app.js文件 右键,选择,在内建终端中打开
3. 在打开的终端中 执行

 npm init  -y

指令初始化 一个 package.json文件

4. 安装你所需要的依赖 比如

npm i @vant/weapp -S --production

4. 修改配置文件 project.config.json

这个文件在根目录下,存着项目的配置

   "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }

1. packNpmManually true启用 npm
2. 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为"./"即可
3. 旧版改为 "./miniprogram/"

---

5. 开发工具配置

5.1 最右侧详情菜单

1. 详情>>>本地配置>>>勾选使用npm

2. 这步新版的开发工具 不需要了,如果没有这个选项就不需要了
   1.png

---

5.2 左侧工具菜单

1.工具>>>构建npm

2.

`.png

---

6. 需要使用界面/组件在json文件配置

6.1配置

 "usingComponents": {
    "van-rate":  "@vant/weapp/rate/index",
    "yzs-button": "@vant/weapp/button/index"
  }

1. 前面的组件名,可以自己起名字,使用 时候保持一致就行

---

6.2 使用

    

 
                       收藏"}}
  

7. template

1. 模板只有布局/wxml和样式文件/wxss,没有json文件
2. 所以使用第三方组件的时候,在引用这个模板的界面 的json文件配置就行

---

8. 全局配置

1. 比较常用的vant组件,在每个组件都配置的话,比较麻烦
2. 所以可以在app.json里面进行统一配置,单个页面就不需要在配置了
3. 直接配置 和 window同级

"window":{},
"usingComponents": {
        "van-cell": "@vant/weapp/cell/index",
        "van-cell-group": "@vant/weapp/cell-group/index",
        "van-button": "@vant/weapp/button/index",
        "van-icon": "@vant/weapp/icon/index"
    }

---

参考资料

vant官网

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉