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

2023-11-15 14:55:10

项目模板说明

通过 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 –save
npm install amfe-flexible –save

在 main.js 中引入
```
import ‘amfe-flexible’
```

在build文件夹下的utils.js 文件中新增这三个
搭建一个基于 Vue + Vant 的移动端项目模板
代码如下：

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

b. 安装 scss

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

安装 vant - ui 库
```
vant 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组件的使用
1. 首页 - 轮播图（Swipe）
2. 分类页 - 骨架屏（Skeleton）
3. 购物车页 - 商品规格（Sku）和分享面板 ShareSheet ）和商品导航（GoodsAction）
4. 个人中心页 - 地址编辑（AddressEdit）和搜索（Search）