小程序vant-weapp框架的引入

为大家介绍一下小程序的ui框架基于有赞开发一个框架，关于它的安装和使用接下来都会介绍到。
先介绍一下人家的官网vant-weapp
注意的是小程序的是vant-weapp，有赞的还有一个移动端ui框架vant-app。
有两种安装方法，下面来一个一个介绍：
第一种方法：使用npm的方式去安装
1.npm init -y
2.npm i vant-weapp -S --production


运行完后有个node_modules，这代表你的第一步成功了。
2.在项目上一定要勾选上使用npm模块
3.在微信小程序的ide上找到工具->构建npm


然后就会构建npm，然后你会发现项目中会多了一个miniprogram_npm

如果这个是后你的页面报错了，你的控制台也爆红了，不要慌，你只需要再次构建一下npm就可以了，再次构建完后，然后就可以引用它的组件了。这是npm安装的方式。
第二种方法就比较直接简单粗暴了：
vant-weapp Github地址找到它的项目地址直接下载下来，然后将它的dist目录复制到你的项目中，就可以引用它的组件了。
再来介绍一下它的引入方式：
它可以单页面引入也可以全局引入这个组件，现在只针对它的单页面引入做示例：

这个组件的名字是可以自己改的如：van-button你可以改成my-button

然后在当前的页面直接用就行了，那有时候我们需要自己设置样式我们可以直接custom-class直接修改去改我们想要的样式。

更新：npm安装完后在小程序的project.config.json

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

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