vite3+H5+vant3+pina项目搭建

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