小程序vantUI使用介绍

455 阅读1分钟

项目介绍

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

image.png

image.png

启动运行

  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
   }
  1. 微信开发者工具-本地设置勾选使用 npm 模块
  2. 微信开发者工具-工具-构建 npm,启动编译运行成功
  3. 执行 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
},