vite+vant4+vue3搭建一个移动端h5项目并进行rem适配

Hyinglin
4,931 阅读3分钟

使用vite新建vue项目

npm create vite@latest

通过 npm 安装 vant

在现有项目中使用 Vant 时，可以通过 npm 进行安装：

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

常规用法

1、引入vant

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

2、使用vant组件和 API

完成以上步骤，就可以直接在模板中使用 Vant 组件了

<template>
  <van-button type="primary" />
</template>

不同手机机型的适配

这里我们采用 "Rem布局适配"

官方文档：vant-contrib.gitee.io/vant/#/zh-C…

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

npm install postcss postcss-pxtorem --save-dev

npm i -S amfe-flexible

PostCSS 示例配置（在项目根目录下新建一个postcss.config.cjs）

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

// postcss.config.cjs
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

Tips: 在配置 postcss-pxtorem 时，同样应避免 ignore node_modules 目录，否则会导致 Vant 样式无法被编译。

其他设计稿尺寸

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

// postcss.config.cjs
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

编辑器中也要设置好rem和px的转化比例，默认是16px，这里我们也要将他改成37.5px

image.png

注意，之所以是37.5，是因为设计稿是375的，amfe-flexible.js中是将屏幕划分成了10份，如下图所示，所以375/10 = 37.5;

企业微信截图_17127128912414.png

main.js中引入amfe-flexible

import 'amfe-flexible'

在index.html中加上视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />

安装vue-router

vue-router官方文档：router.vuejs.org/zh/installa…

npm install vue-router@4

创建新页面

  • 1、在src目录下新建一个page目录，然后在page目录下新建index/index.vue,personal/personal.vue等等

  • 2、在src目录下新建一个router目录，然后再新建一个index.js

router/index.js

import {createRouter,createWebHashHistory} from 'vue-router'

const routes = [{
	//首页
	path: "/",
	name: "index",
	component: () => import('@/page/index/index.vue')
}];

const router = createRouter({
	history: createWebHashHistory(),
	routes
})
  • 3、在App.vue中写上router-view标签
<template>
	<router-view></router-view>
</template>

新建样式文件

在src目录下新建一个styles文件夹，新建三个文件，分别是reset.scss(直接去网上下载一个),global.scss（全局样式）,mixin.scss,由于我们还没有安装sass，所以需要先安装一下sass，否则控制台会报错,如下

企业微信截图_17127120322988.png

注：scss其实就是sass

安装sass

npm install -D sass

vite 已经将 sass 预处理器的 loader 内置了，我们不用再像 webpack 项目中那样，需要下载和配置一堆相关的loader，我们只需要下载 sass 依赖，就能直接在项目中使用了。

在main.js中引入全局样式,即可在各个组件中使用

import '@/styles/global.scss' // global css

global.scss

@import url("reset.scss");

//超出750px的根元素大小统一都设置为37.5px
@media screen and (min-width: 750px) {
	html {
	  font-size: 37.5px !important;
	}
}

.flex{
	display: flex;
}

.j-c{
	justify-content: center;
}

.j-s-b{
	justify-content: space-between;
}

.j-s-a{
	justify-content: space-around;
}

.a-c{
	align-items: center;
}

// 外边距
.m-b-30 {
    margin-bottom: 30px;
}

.m-l-5 {
     margin-left: 15px;
}

// 内边距
.p-b-30 {
    margin-bottom: 30px;
}

.p-l-5 {
     margin-left: 15px;
}
avatar
文章
阅读
粉丝