关于taro(vue)+vant安装说明文档

一、nodejs（已经安装nodejs且版本大于12.0.0的请略过这步）

二、安装taro
三、引入vant

Taro 项目基于 node，请确保已具备较新的 node 环境（>=12.0.0），首先进入nodejs官网根据自己的需要的系统及版本下载nodejs安装包。这里以msi安装包为例。
node安装地址：http://nodejs.cn/download/
msi安装包属于傻瓜式安装，双击安装包后一直点击next即可，如果不希望安装在c盘可以在安装路径中自行设置，如下图：

安装完打开cmd,先键入安装盘，再检测node是否安装成功（命令：node -v）

开发过程中我们要经常从网上down包或者项目，一般情况下使用npm安装模块分为本地安装和全局安装。
本地安装：npm install express 会安装到当前项目
全局安装：npm install express -g 会安装到指定的目录(node_global)
注：如果没有设置全局目录node_global，那么全局安装的文件将会保存到C:\Users\93489\AppData\Roaming\npm下。
所以，安装好node后，为了不占用C盘内存，要设置一下node_global和node_cache(node缓存文件夹)。
1，在node安装目录创建node_global和node_cache文件夹

2，设置环境变量：
接下来我们需要把这两个文件夹的路径设置在npm中使其生效
Win+R输入cmd打开命令提示符窗口，然后运行下面两行命令（D:\nodejs\node_global对应你自己设置的文件夹路径）
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
运行完毕输入npm config list命令查看配置路径是否已经改变，如下图:

在桌面找到我的电脑右键选择属性，或者在开始菜单点击设置图标选择系统

进入后左侧导航栏拉到底部选择关于，然后右侧拉到底部找到高级系统设置

点击进入后选择环境变量

点击环境变量，然后选择系统变量下方的新建

点击新建后变量名填写NODE_PATH ; 变量值填写D:\mango\nodejs\node_cache ；变量值保持和你创建的node_cache路径一致，点击确定

接下来设置node_global的环境变量，找到用户变量中的PATH，没有PATH的话直接添加，点击编辑

然后把对应node的路径修改为你自己文件夹的路径

Node就安装完成了。

二、安装taro

先附上taro官网，里面有taro的入门教程及api的使用：
http://taro-docs.jd.com/taro/docs/README
首先是cli工具的安装，你需要使用 npm 、 cnpm 或者 yarn 全局安装 @tarojs/cli；根据自己的工具输入对应的命令：
使用 npm 安装 CLI：npm install -g @tarojs/cli
使用 yarn 安装 CLI：yarn global add @tarojs/cli
使用 cnpm 安装 CLI：cnpm install -g @tarojs/cli
安装完成后可以通过命令：npm info @tarojs/cli来查看Taro的版本信息。

接下来就是使用命令创建项目：taro init myApp（myApp为自己设置的项目名称）

项目介绍可以不写，我通常是填写项目名称后回车进入下一步，然后选择要使用的语言，这里我选择的是vue

接下来是选择是否使用Ts，如果有需要请自行选择，这里我不需要就选择了否

然后选择自己需要的css预处理器：

选择模板版源，这里推荐使用gitee，国内使用GitHub网速堪忧，根据自己情况而定

然后等待创建完成即可。

三、引入vant

Taro3支持使用vant weapp组件库进行开发，具体操作及示例demo在官网有写，地址：
http://taro-docs.jd.com/taro/docs/vant
官网示例是react的，我这里说一下vue的引入和一些注意事项。引入和文件配置和react没有什么区别，这里主要记录一下在配置及使用taro+vant开发小程序时一些vue的写法不再生效的问题及其他的一些我遇到的坑。
第一个问题是Taro中引入Vant Weapp，不能直接通过第三方NPM包的形式直接调用。需下载资源到本地。所以我们需要把vant的组件放在项目的组件文件夹下，并对其配置copy 小程序原生文件；首先在项目/src/components下新建文件夹vant-weapp；然后在github上找到vant-weapp下载文件包，将对应的dist文件夹下内容复制到新建的vant-weapp文件夹下。

vant 组件中包含一些小程序原生文件的依赖，目前 Taro 没有对这些依赖进行分析。因此需要配置 copy 把这些依赖移动到 dist 目录中，例如需要 copy wxs 和样式文件，这里我们可以选择简单粗暴的copy整个目录；也可以选择根据项目需要只copy你所用到的vant组件。下面我先来介绍如何copy整个目录：
在项目中找到config文件夹下的index.js文件，并找到copy属性，添加

patterns: [{from:’src/components/vant-weapp’,to:’dist/components/vant-weapp’}
]

如下图（index文件下正常已经生成patterns属性，对应添加缺少的部分即可）：

按需引入的方法位置同上，改变的只是由添加vant-weapp整个文件改为添加vant-weapp下项目内使用到的组件，代码如下（图中代码官网已有示例，有需要的可以去taro官网自行复制）：

第二个问题是配置忽略 vant 的样式尺寸转换
如果直接使用 vant 组件，会发现样式偏小的情况，这是因为 Taro 默认将 vant 的样式尺寸从 px 转换为了 rpx，可以通过配置 selectorblacklist 来禁止转换。
在项目中找到config文件夹下的index.js文件，并找到mini属性添加selectorBlackList，代码如下：

mini: {postcss: {pxtransform: {enable: true,config: {selectorBlackList: [/van-/]}},}}

这样vant的配置就算完成了，接下来我们在项目中进行引用
注：引用分为全局引用和局部引用，全局引用需要在config/index.js文件下对vant路径进行别名定义，局部引用直接使用相对路径即可。
全局引用：
还是找到项目中config文件夹下的index.js文件，首先引入路径模块，代码如下：

const path = require('path');

然后在config对象内添加alias属性，代码如下：

alias: {'@vant': path.resolve(__dirname, '../src/components/vant-weapp')},

然后找到项目src下app.config.js文件

添加usingComponents属性，代码如下：

usingComponents: {"van-button": "@vant/dist/button/index",}

其中van-button为你在项目中要使用的vant插件名称，后面为对应路径。

注：@vant是之前定义的别名，要注意@vant配置的路径到哪个文件夹下，然后全局引用时小心不要写错路径，这里的路径是根据项目打包后dist文件夹下（D:\mango\taro\vantDemo\dist\components\vant-weapp\dist）引用的，如果你打包的是小程序且在全局引用，打包文件夹下app.json文件会生成对应的路径配置，如果路径报错可以来这里查看路径是否正确。

局部配置：
局部引用只需要进入你要使用vant的页面对应的文件夹，找到它下面的config.js并配置usingComponents即可。如图：

注：这里局部变量我使用的是相对路径，也可以使用@vant定义别名后使用，@vant定义和全局变量配置方法相同，这里就不再累述。另：全局变量不可与局部变量同时使用。

以上就是taro+vant的全部安装内容了，如果有同样感兴趣的小伙伴在安装或者使用中遇到问题欢迎一起讨论。如果有哪里有问题也欢迎大家指正，我会及时修改的，感谢阅读。