小程序vantUI使用介绍

项目介绍

小程序采用技术栈为:原生小程序语法+vantUI+iconfont+dayjs+echarts+less 等
vantUI github：https://github.com/youzan/vant-weapp
vant 官网：https://vant-contrib.gitee.io/vant-weapp/#/tab

启动运行

1. npm install 或 cnpm i （需要修改 node_modules 文件，具体操作在下面）
2. 找到 node_modules/postcss-pxtransform/index.js

   // 修改前
   // const deviceRatio = {
   // 640: 2.34 / 2,
   // 750: 1,
   // 828: 1.81 / 2
   // }

   // 修改后

   const deviceRatio = {
   '640': 2.34,
   '750': 2,
   '828': 1.81
   }

3. 微信开发者工具-本地设置勾选使用 npm 模块
4. 微信开发者工具-工具-构建 npm，启动编译运行成功
5. 执行 npm run build

配置 setting.json 如下:

改用扩展插件(不需要生成 wxss，可直接使用 less)：

"useCompilerPlugins": [
    "typescript",
    "less"
],

编辑器环境

Easy less已废弃，改用小程序扩展插件less
下载并使用 VScode，安装插件 Easy less(保存 less 自动生成 wxss)

// sourceMap：配置是否输出 map 文件
// compress：配置是否是压缩输出
// out：至指定输出的路径（相对本文件的路径）
// outExt：输出的文件的后缀名
"less.compile": {
    "compress": false, // true => remove surplus whitespace
    // "compress": true, // true => remove surplus whitespace
    "sourceMap": false, // true => generate source maps (.css.map files)
    // "out":"${workspaceRoot}\\css\\", // false => DON'T output .css files (overridable per-file, see below)
    "outExt": ".wxss" // 输出文件的后缀,默认为.css
},