Vue3+Vant开发：项目初始化

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：Web前端

内容/作用：知识点/设计/实验/作业/练习

学习：Vue3+Vant开发：项目初始化

Vant 官网:

https://vant-contrib.gitee.io/vant/v3/#/zh-CN

1、使用Vite搭建项目环境

npm create @vitejs/app

在弹出的窗口中添加项目名称：vant-app-demo。

输入项目名称以后，选择模板，这里我们选择的是Vue.同时选择使用的语言是JavaScript.

下面需要完成项目的初始化。

进入项目名称文件夹，安装所有的依赖，最后执行npm run dev启动项目

  cd vant-app-demo
  npm install
  npm run dev

2、Vant 安装与基本使用

npm i vant@next -S

在main.js文件中，导入vant

import { createApp } from "vue";
import App from "./App.vue";
import Vant from "vant"; //导入vant
import "vant/lib/index.css"; //导入样式
createApp(App).use(Vant).mount("#app"); //使用vant

在App.vue组件中进行测试：

<img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <van-button type="primary">按钮</van-button><!--使用Vant中的按钮-->

3、移动端REM适配

这里，我们要做移动的适配处理。

Vant 默认使用 px 作为样式单位，

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

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位，而使用rem必须有一个参考的基准值，有下面工具指定
lib-flexible 用于设置 rem 基准值(对html标签的字体大小进行动态设置)

安装lib-flexible工具：

npm i amfe-flexible

安装以后，在main.js文件中进行导入：

import { createApp } from "vue";
import App from "./App.vue";
import Vant from "vant";
import "vant/lib/index.css";
import "amfe-flexible";//导入，用于设置rem基准值
createApp(App).use(Vant).mount("#app");

然后审查元素（这里将浏览器切换到移动环境中查看），可以看到html标签的中添加了style='font-size:37.5px',这个值会根据不同适配进行动态的改变。

lib-flexible 工具的方案：把一行分为10分，每份的大小除以10。

当前我们演示的设备是iPhone 6/7/8,这些设备的宽度为375，所以除以10，就是37.5像素。所以切换到不同的设备，该值会发生变化。从而针对不同的设备实现了适配。

下面安装postcss-pxtorem 工具

通过该工具可以将px转为rem.

npm install postcss-pxtorem -D

下面进行配置：

在项目的根目录下面创建 postcss.config.js文件

将如下代码拷贝到该文件中(下面的代码在官网中的Rem 布局适配：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/advanced-usage)

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

然后重新启动项目

项目启动以后，刷新浏览器，查看添加的vant的按钮的样式，发现单位都被转换成了rem

这里不光是vant组件的单位进行了转换，同时我们自己定义的单位也会发生变化。

在App.vue组件中（把原有的默认内容删除掉了），添加了box这个div，并且添加了样式，然后返回浏览器中审查元素，发现单位进行了转换

<template>
  <div class="box"></div>
  <van-button type="primary">按钮</van-button>
</template>

<script setup></script>

<style>
.box {
  width: 200px;
  height: 100px;
  background-color: blue;
}
</style>

这里需要注意的一点就是这个工具不能转换行内样式中的px,例如如下所示：

  <div class="box" style="padding: 30px">Hello World</div>

在浏览器中进行查看，发现没有转换。

4、关于postcss配置介绍

PostCSS是一个处理CSS的处理工具，本身的功能比较单一，它主要负责解析css代码，再交由插件来进行处理。不同的插件有不同的功能。 postcss.config.js文件

• Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀
• PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容
• postcss-pxtorem 可以实现将 px 转换为 rem
• …

// PostCss配置文件
module.exports = {
    // 配置所需要的插件
  plugins: {
    //   配置使用postcss-pxtorem插件
    //作用把px转成rem
    "postcss-pxtorem": {
        //rootValue:根元素的值
      //我们这里使用的是lib-flexible的REM适配方案：它的原理是：把一行分为10份，每份就是10分之一，所以rootValue应该设置为你的设计稿宽度的十分之一
      //假如我们的设计稿是宽是750px，所以应该设置为75，大多数设计稿的原型都是以iphone6为原型，iphone6设备的宽度是750.
      //但是Vant建议设置为37.5，因为Vant是基于375写的。
      //所以这里的缺点就是使用咱们设计稿的尺寸都必须除以2（比较麻烦），如果我们这里直接指定75，那么使用vant样式的组件就会变的非常小
      //有没有更好的办法呢？
      // 我们想：如果是是Vant的样式，就按照37.5来转换，如果是我们自己的样式，就按照75来转换。
      // rootValue支持两种处理方式：一种是直接返回数字，另外就是函数，通过函数可以实现动态的处理。
      // postcss-pxtorem处理每个CSS文件的时候都会调用该方法，并且它会把处理的`css`文件的相关信息通过
      //参数传递给该函数。下面这里我们解构出来的就是文件路径的属性。看一下路径中是否包含vant,如果是就是处理vant的css，否则就是处理我们
      //自己的css
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      //   rootValue: 37.5,
      // 配置要转换的css属性
      // *:表示所有，如果只想转换height属性，可以采用如下的写法：propList:['height']，我们大多的情况就是转换所有
      propList: ["*"],
    },
  },
};

这里，我们修改一下App.vue这个组件中的样式

<style>
.box {
  width: 750px;
  height: 100px;
  background-color: blue;
}
</style>

这里我们把宽度设置了750px，整好是撑满一整行。

5、封装请求模块

安装：

npm install axios

在src目录下面创建utils目录，该目录保存的就是常用的工具操作。在该目录下面创建request.js文件。

import axios from "axios";
const request = axios.create({
  baseURL: "http://localhost:3005/",
});
//请求拦截器
//响应拦截器
export default request;

目前，先配置baseURL，后面在配置其它的内容，例如请求拦截器和响应拦截器等

总结

感谢小伙伴们一键三连，咱们下期文章再见~

往期专栏
Java全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术