{"id":34095,"date":"2024-11-25T16:37:54","date_gmt":"2024-11-25T08:37:54","guid":{"rendered":"https:\/\/fwq.ai\/blog\/34095\/"},"modified":"2024-11-25T16:37:54","modified_gmt":"2024-11-25T08:37:54","slug":"%e5%b0%8f%e7%a8%8b%e5%ba%8fvant%e7%bb%84%e4%bb%b6%e6%80%8e%e4%b9%88%e5%b0%86%e9%bb%98%e8%ae%a4%e6%a0%b7%e5%bc%8f%e5%8d%95%e4%bd%8dpx%e8%bd%ac%e4%b8%barpx","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/34095\/","title":{"rendered":"\u5c0f\u7a0b\u5e8fVant\u7ec4\u4ef6\u600e\u4e48\u5c06\u9ed8\u8ba4\u6837\u5f0f\u5355\u4f4dpx\u8f6c\u4e3arpx"},"content":{"rendered":"

\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u4ecb\u7ecd\u4e00\u4e0b\u5728\u4e2d\u4f7f\u7528vant\u7ec4\u4ef6\u65f6\uff0c\u5c06px\u8f6c\u4e3arpx\u7684\u65b9\u6cd5\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01<\/p>\n

\"\u5c0f\u7a0b\u5e8fVant\u7ec4\u4ef6\u600e\u4e48\u5c06\u9ed8\u8ba4\u6837\u5f0f\u5355\u4f4dpx\u8f6c\u4e3arpx\u63d2\u56fe\"<\/p>\n

\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4f7f\u7528\u4e86\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5e93\uff08\u4f8b\u5982\uff1aVant\uff09\u65f6\uff0c\u7ec4\u4ef6\u9ed8\u8ba4\u6837\u5f0f\u662f\u4f7f\u7528\u7684px\uff0c\u8fd9\u65e0\u6cd5\u548c\u6211\u4eec\u9875\u9762\u4e2d\u7684rpx\u5355\u4f4d\u76f8\u517c\u5bb9\u3002\u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011<\/p>\n

\u6280\u672f\u65b9\u6848<\/strong><\/h2>\n
\n

\n 1.gulp2.gulp-postcss3.postcss-px2units\n<\/p><\/blockquote>\n

\u5b9e\u73b0\u6b65\u9aa4<\/strong><\/h2>\n

1\u3001\u521d\u59cb\u5316\u5e76\u5b89\u88c5<\/p>\n

npm init \/\/\u4e00\u8def\u56de\u8f66 \nnpm install --production \nnpm i @vant\/weapp -S --production<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2\u3001\u5728\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u5de5\u5177\u4e2d\u52fe\u9009npm<\/p>\n
\"\u5c0f\u7a0b\u5e8fVant\u7ec4\u4ef6\u600e\u4e48\u5c06\u9ed8\u8ba4\u6837\u5f0f\u5355\u4f4dpx\u8f6c\u4e3arpx\u63d2\u56fe1\"<\/p>\n
3\u3001\u5728\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u5de5\u5177\u4e2d\u6784\u5efanpm<\/p>\n
\"\u5c0f\u7a0b\u5e8fVant\u7ec4\u4ef6\u600e\u4e48\u5c06\u9ed8\u8ba4\u6837\u5f0f\u5355\u4f4dpx\u8f6c\u4e3arpx\u63d2\u56fe2\"<\/p>\n
4\u3001\u6784\u5efa\u6210\u529f\u540e\u4f1a\u51fa\u73b0miniprogram_npm\u6587\u4ef6\u5939<\/p>\n
\"\u5c0f\u7a0b\u5e8fVant\u7ec4\u4ef6\u600e\u4e48\u5c06\u9ed8\u8ba4\u6837\u5f0f\u5355\u4f4dpx\u8f6c\u4e3arpx\u63d2\u56fe3\"<\/p>\n
5\u3001\u5b89\u88c5npm\u5305<\/p>\n
npm install gulp gulp-postcss postcss-px2units --save-dev<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
6\u3001\u5728\u6839\u76ee\u5f55\u65b0\u5efagulpfile.js\u6587\u4ef6<\/p>\n
var gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar pxtounits =  require('postcss-px2units');\n\ngulp.task('css', function () {\n  return gulp.src(['miniprogram_npm\/@vant\/weapp\/**\/*.wxss'])\n    .pipe(postcss([pxtounits({\n      multiple: 2,\n      targetUnits: 'rpx'\n    })]))\n    .pipe(gulp.dest('miniprogram_npm\/@vant\/weapp\/'));\n});<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
7\u3001\u5728package.json\u4e0b\u9762\u7684scripts\u6dfb\u52a0\u4e00\u4e2a\u6267\u884c\u547d\u4ee4<\/p>\n
 \"scripts\": {\n    \"build\": \"gulp css\",\n    \"test\": \"echo \"Error: no test specified\" &amp;&amp; exit 1\"\n  },<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
8\u3001\u547d\u4ee4\u884c\u4e2d\u6267\u884c<\/p>\n
npm run build<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
9\u3001\u67e5\u770b\u8f6c\u6362\u540e\u7684wxss\u6587\u4ef6<\/p>\n
\"\u5c0f\u7a0b\u5e8fVant\u7ec4\u4ef6\u600e\u4e48\u5c06\u9ed8\u8ba4\u6837\u5f0f\u5355\u4f4dpx\u8f6c\u4e3arpx\u63d2\u56fe4\"<\/p>\n
\u5c31\u6b64\u5df2\u7ecf\u5c06px\u8f6c\u5316\u6210\u4e86rpx\uff0c\u5927\u529f\u544a\u6210\uff01\uff01\uff01<\/p>\n
\u66f4\u591a\u7f16\u7a0b\u76f8\u5173\u77e5\u8bc6\uff0c\u8bf7\u8bbf\u95ee\uff1a\uff01\uff01<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5c0f\u7a0b\u5e8fVant\u7ec4\u4ef6\u600e\u4e48\u5c06\u9ed8\u8ba4\u6837\u5f0f\u5355\u4f4dpx\u8f6c\u4e3arpx\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u4ecb\u7ecd\u4e00\u4e0b\u5728\u4e2d\u4f7f\u7528vant\u7ec4\u4ef6\u65f6\uff0c\u5c06px\u8f6c\u4e3arpx\u7684\u65b9\u6cd5\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01 \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4f7f\u7528\u4e86\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5e93\uff08\u4f8b\u5982\uff1aVant\uff09\u65f6\uff0c\u7ec4\u4ef6\u9ed8\u8ba4\u6837\u5f0f\u662f\u4f7f\u7528\u7684px\uff0c\u8fd9\u65e0\u6cd5\u548c\u6211\u4eec\u9875\u9762\u4e2d\u7684rpx\u5355\u4f4d\u76f8\u517c\u5bb9\u3002\u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011 \u6280\u672f\u65b9\u6848 1.gulp2.gulp-postcss3.postcss-px2units \u5b9e\u73b0\u6b65\u9aa4 1\u3001\u521d\u59cb\u5316\u5e76\u5b89\u88c5 npm init \/\/\u4e00\u8def\u56de\u8f66  npm install –production  npm i @vant\/weapp -S –production \u767b\u5f55\u540e\u590d\u5236 2\u3001\u5728\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u5de5\u5177\u4e2d\u52fe\u9009npm 3\u3001\u5728\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u5de5\u5177\u4e2d\u6784\u5efanpm 4\u3001\u6784\u5efa\u6210\u529f\u540e\u4f1a\u51fa\u73b0miniprogram_npm\u6587\u4ef6\u5939 5\u3001\u5b89\u88c5npm\u5305 npm install gulp gulp-postcss postcss-px2units –save-dev \u767b\u5f55\u540e\u590d\u5236 6\u3001\u5728\u6839\u76ee\u5f55\u65b0\u5efagulpfile.js\u6587\u4ef6 var gulp = require(‘gulp’); var postcss = require(‘gulp-postcss’); var pxtounits =  require(‘postcss-px2units’); gulp.task(‘css’, function () {   return gulp.src([‘miniprogram_npm\/@vant\/weapp\/**\/*.wxss’])     .pipe(postcss([pxtounits({       multiple: 2,       targetUnits: ‘rpx’     })]))     .pipe(gulp.dest(‘miniprogram_npm\/@vant\/weapp\/’)); }); \u767b\u5f55\u540e\u590d\u5236 7\u3001\u5728package.json\u4e0b\u9762\u7684scripts\u6dfb\u52a0\u4e00\u4e2a\u6267\u884c\u547d\u4ee4  “scripts”: {     “build”: “gulp css”,     “test”: “echo “Error: no test specified” &amp;&amp; exit 1″   }, \u767b\u5f55\u540e\u590d\u5236 8\u3001\u547d\u4ee4\u884c\u4e2d\u6267\u884c npm run build \u767b\u5f55\u540e\u590d\u5236 9\u3001\u67e5\u770b\u8f6c\u6362\u540e\u7684wxss\u6587\u4ef6 \u5c31\u6b64\u5df2\u7ecf\u5c06px\u8f6c\u5316\u6210\u4e86rpx\uff0c\u5927\u529f\u544a\u6210\uff01\uff01\uff01 \u66f4\u591a\u7f16\u7a0b\u76f8\u5173\u77e5\u8bc6\uff0c\u8bf7\u8bbf\u95ee\uff1a\uff01\uff01 \u4ee5\u4e0a\u5c31\u662f\u5c0f\u7a0b\u5e8fVant\u7ec4\u4ef6\u600e\u4e48\u5c06\u9ed8\u8ba4\u6837\u5f0f\u5355\u4f4dpx\u8f6c\u4e3arpx\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-34095","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=34095"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34095\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=34095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=34095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=34095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}