1.创建项目
创建项目之前首先确保你安装了最新版本的 Node.js
创建项目,在命令行中运行以下命令
npm init vue@latest
执行如下命令进入项目更目录并按照依赖
cd vue3-vant-h5-template
npm install
执行下面命令运行项目
npm run dev
2.安装vant
vant官网：https://vant-contrib.gitee.io/vant/#/zh-CN
2.1在现有项目中使用 Vant 时，可以通过 npm 进行安装：
# Vue 3 项目，安装最新版 Vant
npm i vant --save
2.2按需引入组件
在基于 vite 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。
安装插件
# 通过 npm 安装
npm i unplugin-vue-components -D
配置插件
如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers:[VantResolver()]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
使用组件
完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件。
<template>
<van-button type="primary" />
</template>
引入函数组件的样式
Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/main.css";
//引入vant中函数式组件的样式
// Toast
import "vant/es/toast/style";
// Dialog
import "vant/es/dialog/style";
// Notify
import "vant/es/notify/style";
// ImagePreview
import "vant/es/image-preview/style";
createApp(App).mount("#app");
你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。
// ./src/components/HelloWorld.vue
<script setup lang="ts">
import { showToast, showDialog, showNotify, showImagePreview } from "vant";
defineProps<{
msg: string;
}>();
const testShowToast = () => {
showToast("测试showToast");
};
const testShowDialog = () => {
showDialog({ message: "测试showDialog" });
};
const testShowNotify = () => {
showNotify({ message: "测试showNotify" });
};
const testShowImagePreview = () => {
showImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);
};
</script>
<template>
<div>
<van-button type="primary" @click="testShowToast">showToast</van-button>
<van-button type="success" @click="testShowDialog">showDialog</van-button>
<van-button type="default" @click="testShowNotify">showNotify</van-button>
<van-button type="warning" @click="testShowImagePreview">showImagePreview</van-button>
</div>
</template>
<style scoped>
</style>
3.浏览器适配
Viewport 布局
Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。
postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。
3.1安装
npm install postcss-px-to-viewport -D
3.2在项目根目录下添加postcss.config.js文件
// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
},
},
};
Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。
别急，你以为就这样完事了吗，并没有。上面只是对设计稿尺寸为 375 的进行转换( vant 设计稿尺寸是 375 🤦♂️)，但是我们大部分设计稿尺寸都是 750 ，所以需要额外对 750 尺寸的进行处理。
由于 postcss-px-to-viewport 没有提供类似 postcss-pxtorem 中 rootValue({ file }) {} 的方法，即便使用 module.exports = (param) => {} 这种方式导出postcss配置，也拿不到当前转换文件的信息(备注：以前我记得是可以拿到的，现在拿不到了)，所以无法根据文件路径动态设置 viewportWidth，
有一种hack方式：通过多次 pxToViewport() 处理不同文件来设置viewportWidth😎
// postcss.config.js
const path = require('path');
const pxToViewport = require('postcss-px-to-viewport');
module.exports = {
plugins: [
pxToViewport({ // vant
viewportWidth: 375,
propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
selectorBlackList: ['aaaa'],// 指定不转换为视窗单位的类名，
exclude: [/^(?!.*node_modules\/vant)/],// 设置忽略文件，用正则做目录名匹配
//include: [/node_modules\/vant/],
}),
pxToViewport({ // 非vant
viewportWidth: 750,
exclude: [/node_modules\/vant/],
})
]
}
第一个处理 vant 的 pxToviewport 为什么不用include选项呢？
因为 postcss-px-to-viewport v1.1.1 不支持 include 配置项，v1.2.0 开始加入include，但是并没有发布到npm仓库🤦♂️,
然后运行项目，你会发现报如下警告：
原因是 postcss-px-to-viewport 不支持 postcss 8.x ，而vite内置postcss 8.x，所以使用postcss-px-to-viewport会抛出警告🤦♂️
要改用 postcss-px-to-viewport-8-plugin(https://github.com/lkxian888/postcss-px-to-viewport-8-plugin) 替代，既支持 include 配置项，也支持postcss 8.x
安装：
npm install postcss-px-to-viewport-8-plugin -D
最终完整的postcss.config.js代码为：
// postcss.config.js
const path = require('path');
const pxToViewport = require('postcss-px-to-viewport-8-plugin');
module.exports = {
plugins: [
pxToViewport({ // vant
viewportWidth: 375,
propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
selectorBlackList: ['aaaa'],// 指定不转换为视窗单位的类名，
exclude: [/^(?!.*node_modules\/vant)/],// 设置忽略文件，用正则做目录名匹配
}),
pxToViewport({ // 非vant
viewportWidth: 750,
exclude: [/node_modules\/vant/],
})
]
}
4.自动添加前缀
autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的
安装
npm i autoprefixer -D
在postcss.config.js中配置
// postcss.config.js
const autoprefixer = require('autoprefixer');
const pxToViewport = require('postcss-px-to-viewport-8-plugin');
module.exports = {
plugins: [
autoprefixer({
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 35', 'ff > 31', 'ie >= 8']
}), // 自动为css添加浏览器前缀
pxToViewport({ // vant
viewportWidth: 375,
propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
selectorBlackList: ['aaaa'],// 指定不转换为视窗单位的类名，
exclude: [/^(?!.*node_modules\/vant)/],// 设置忽略文件，用正则做目录名匹配
}),
pxToViewport({ // 非vant
viewportWidth: 750,
exclude: [/node_modules\/vant/],
})
]
}
5.CSS 预处理器less
安装
npm install less -D
安装后直接使用就可以啦
6.项目规范
6.1集成editorconfig配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
在项目根目录创建.editorconfig文件
# http://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
VSCode需要安装一个插件：EditorConfig for VS Code
6.2. 使用prettier工具（不需要做，创建项目时自动安装了prettier并生成了配置文件）
Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。
1.安装prettier
npm install prettier -D
2.在项目根目录创建.prettierrc文件并配置：
useTabs：使用tab缩进还是空格缩进，选择false；
tabWidth：tab是空格的情况下，是几个空格，选择2个；
printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
singleQuote：使用单引号还是双引号，选择true，使用单引号；
trailingComma：在多行输入的尾逗号是否添加，设置为
none；semi：语句末尾是否要加分号，默认值true，选择false表示不加；
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
3.创建.prettierignore忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
4.VSCode需要安装prettier的插件
5.测试prettier是否生效
测试一：在代码中保存代码；
测试二：配置一次性修改的命令；
在package.json中配置一个scripts：
"prettier": "prettier --write ."
一次性格式化所有编写的js代码，执行npm run prettier
而我们按照之前命令创建项目时其实已经安装了prettier,并且在package.json中自动添加了用来格式化代码的脚本，也自动创建了.prettierrc.json文件
6.3. 使用ESLint检测
1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。
2.VSCode需要安装ESLint插件：
————————————————
版权声明：本文参考CSDN博主「小满只想睡觉」的原创文章，链接：https://blog.csdn.net/xxxzzzqqq_/article/details/129554703
