1创建空文件夹
0、node版本
image.png
1、创建vite模板
npm init vite@latest my-vue-app -- --template vue
2、引入vw适配方案
npm i -D autoprefixer@^10.4.7
npm i -D postcss-px-to-viewport-8-plugin@^1.1.3
3、添加配置文件 postcss.config.cjs
此处注意是cjs结尾，否则会报如下错误
[vite] Internal server error: Failed to load PostCSS config (searchPath: F:/09-29desk_backup/疫情地图/vant-demo/vant/vite/my-
vite): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: F:/09-29desk_backup/疫情地图/vant-demo/vant/vite/my-vit
e): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: F:/09-29desk_backup/疫情地图/vant-demo/vant/vite/my-vite):
[Failed to load PostCSS config] Failed to load PostCSS config (searchPath: F:/09-29desk_backup/疫情地图/vant-demo/vant/vite/my-vite): [F
ailed to load PostCSS config] Failed to load PostCSS config (searchPath: F:/09-29desk_backup/疫情地图/vant-demo/vant/vite/my-vite): [Refe
renceError] module is not defined in ES module scope
image.png
4、引入vant 组件
npm i -S vant@latest
npm i -D unplugin-vue-components@^0.22.0
配置vite.config.js
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
})
]
})
页面效果如下
image.png
5、rem适配方案
npm i postcss-pxtorem lib-flexible
//main.js引入
// 移动端适配
import 'lib-flexible/flexible.js'
//postcss.config.cjs 配置
module.exports = {
plugins: {
"autoprefixer": {},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
}
}
页面效果
image.png
