本文共 1399 字，大约阅读时间需要 4 分钟。

项目模板说明

• 通过 px2rem-loader 和 amfe-flexible 实现 px 自动 转rem, 不想转rem的可以使用 大写 的 PX
• 使用 less 或 scss ，项目中已经安装好依赖，根据自己的需求选择

搭建步骤

1. 创建一个Vue项目

   vue init webpack my-vant-app    //（详细步骤就不多说了。。。）

2. 安装 px2rem-loader 和 amfe-flexible 两个依赖

   npm install px2rem-loader –savenpm install amfe-flexible –save

3. 在 main.js 中引入

   import ‘amfe-flexible’

4. 在build文件夹下的utils.js 文件中 新增这三个

   
   代码如下：

   const px2remLoader = {        loader: 'px2rem-loader',    options: {           remUnit: 37.5    }  }

   const loaders = options.usePostCSS ? [cssLoader,postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

5. 安装 less 和 scss

   a. 安装less

   npm install less --savenpm install less-loader@4.1.0 --save-dev

   b. 安装 scss

   npm install node-sass@4.14.1 --savenpm install sass-loader@7.3.1 --save-dev

6. 安装 vant - ui 库

   vant npm i vant -S

7. 按需引入

   
   代码如下：
   a. 然后在 babel.config.js 中配置

   module.exports = {     	presets: [	  '@vue/app'	],	“plugins”: [ "transform-vue-jsx","transform-runtime",		[		“import”,		 {     	        “libraryName”: “vant”,	        “libraryDirectory”: “es”,	        “style”: true	     }, “vant”		]   ]}

   b. 在 src目录下 新建 utils 文件夹，在utils文件夹下新建 vant.js 文件，按需引入组件

   

   c. 同时在 main.js 文件中引入 vant.js

   
   ----------------------------------------------------------------------------------------------------------------------------------
   扩展 - vant组件的使用
   1. 首页 - 轮播图（Swipe）

      

   2. 分类页 - 骨架屏（Skeleton）

      

   3. 购物车页 - 商品规格（Sku）和 分享面板 ShareSheet ）和 商品导航（GoodsAction）

      
      
      

   4. 个人中心页 - 地址编辑（AddressEdit）和 搜索（Search）