基于vue/cli搭建的小程序使用组件库UI

1.搭建vue脚手架

1.通过vscode的终端输入命令：vue init mpvue/mpvue-quickstart project，进行小程序的创建，

通过vscode打开新创建的文件目录。

2.使用命令npm install，下载所需要的npm的依赖。 

 

3.通过npm下载需要的组件库UI(以VantUI为例)

VantUI官网：Vant Weapp - 轻量、可靠的小程序 UI 组件库

 

 

在app.json文件中添加以下代码

 

注意引入的是miniprogram_npm下的文件，而不是node_package

最后应用在代码当中

2.问题与解决

因为基于vue/cli生成的项目的“miniprogramRoot”是“dist/wx/”而不是"miniprogram"，而且npm构建的项目miniprogram_npm默认路径与dist/wx/同级，导致app.json找不到文件路径，可能就会报错。

解决方法：将miniprogram_npm文件移至dist/wx/目录下，就可以访问。