微信小程序 （wepy + vant + less）项目初始化

使用的前提：已安装全局的npm环境和wepy工具。

wepy版本为：2.1.0

npm版本为：6.14.8

基于上述环境进行如下操作，初始化wepy结构的小程序项目。

1.创建wepy（小程序）项目

wepy init standard myproj(项目名称) # 使用 standard 模板初始化项目

cd myproj(项目文件夹名) # 进入到项目目录

npm install # 安装项目依赖包

npm run dev # 监听并且编译项目

2.安装less/sass

操作步骤：

1:安装sass

npm i node-sass

podfile.png

2:安装wepy-compiler-sass插件

npm install wepy-compiler-sass --save-dev

podfile.png

3:配置wepy.config.js

podfile.png

3.安装UI框架 - Vant Weapp

vant-weapp：https://youzan.github.io/vant-weapp/#/quickstart

操作步骤：

1.安装vant weapp

npm i @vant/weapp -S --production

(备注：千万不要忘记“@”)

2.引用到xxx.wepy文件中

<config>
{
    navigationBarTitleText: 'WePY 2.0 Feature Demo',
    usingComponents: {
      "van-button": "module:@vant/weapp/dist/button",
    }
}
</config>

问题说明：

1.之前按照网上百度的方式是从node_modules文件库中找到vant-weapp文件下的dist将其复制到src/components/新建的vant文件夹下，然后进行引用。但是vant效果怎么都显示不出来，引用路径也不报错。各种尝试，清理wepy缓存等都无法实现效果。最终按照上述进行尝试后解决问题。特此备注说明，有大哥可以解释一下。