vue3+vite3+vant搭建移动端简易模版

前言

vue3.x相关的生态已经在不断的完善中，相应的UI/路由/pinia等都已成熟，新的项目也在考虑使用新版本开发了，开一个帖子记录一下搭建移动端简易模版的过程，方便以后回顾。

vite前端构建工具

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 NPM:

npm create vite@latest 
1

使用 Yarn:

yarn create vite 
1

使用 PNPM:

pnpm create vite 
1

选择自己需要的模版以后安装依赖并启动

CSS 预处理器安装

sass

Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

yarn add sass -D 
1

移动端适配

viewport 之前做移动端适配通常都是使用lib-flexible+postcss-pxtorem的方案，但是随着viewport单位得到越来越多浏览器的支持，lib-flexible 官方也基本已经废弃，建议大家都使用viewport方案。

postcss-px-to-viewport

将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

将px自动转换成viewport单位vw，vw本质上还是一种百分比单位，100vw即等于100%

1.安装

使用 NPM:

npm install postcss-px-to-viewport --save-dev 
1

使用 Yarn:

yarn add -D postcss-px-to-viewport 
1

2.在项目根目录下创建 postcss.config.cjs 文件

module.exports = {plugins: {'postcss-px-to-viewport': {unitToConvert: 'px', // 需要转换的单位，默认为"px"viewportWidth: 375, // 设计稿的视口宽度exclude: [/node_modules/], // 解决vant375,设计稿750问题。忽略某些文件夹下的文件或特定文件unitPrecision: 5, // 单位转换