搭建一个基于 Vue + Vant 的移动端项目模板

项目模板说明

• 通过 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 -save
   npm 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 --save-dev
   npm install less-loader@4.1.0 --save-dev
   

   b. 安装 scss

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

6. 安装 vant - ui 库

   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）