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

项目模板说明

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

搭建步骤

创建一个Vue项目

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

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

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

在 main.js 中引入

import 'amfe-flexible'

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

代码如下：

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

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

安装 less 和 scss

a. 安装less

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

b. 安装 scss

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

安装 vant - ui 库

npm i vant -S

按需引入

代码如下：

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组件的使用

首页 - 轮播图（Swipe）

分类页 - 骨架屏（Skeleton）

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

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