vue3 + ts + vite 写h5页面相关简单配置

1. 配置px单位转换 ( 可以直接代码中写UI稿上的大小 )

安装插件

npm install postcss-px-to-viewport-8-plugin --save-dev

vite.config.ts添加相关配置代码

import PostcssPxToViewport from 'postcss-px-to-viewport-8-plugin'



css:{
    postcss: {
      plugins: [
        PostcssPxToViewport({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
          viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
          unitPrecision: 2, // 指定`px`转换为视窗单位值的小数位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
          minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
          mediaQuery: false, // 允许在媒体查询中转换`px`
          replace: true, // 是否转换后直接更换属性值
          landscape: false, // 是否处理横屏情况
          landscapeUnit: 'vh', // (String) 横屏时使用的单位
          landscapeWidth: 375, // (Number) 横屏时使用的视口宽度
        }),
      ],
    },
  },

2. 配置路径别名@（注意：这里需要安装@types/node）

import path from 'path'

 resolve: {
    alias: {
        "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
    }
  },

同时tsconfig.json中需要添加下边代码

 "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    },

3. 全局使用组件

安装插件

npm install unplugin-vue-components/vite

项目根目录下添加types文件夹，文件夹下创建components.d.ts文件

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

declare module 'vue' {
  export interface GlobalComponents {
    NavTitle: typeof import('./../src/components/NavTitle.vue')['default']  // 这个是自己封装的组件
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    Van: typeof import('vant/es')['default']
    VanButton: typeof import('vant/es')['Button']
    VanCell: typeof import('vant/es')['Cell']
    VanCheckbox: typeof import('vant/es')['Checkbox']
    VanDialog: typeof import('vant/es')['Dialog']
    VanDivider: typeof import('vant/es')['Divider']
    VanField: typeof import('vant/es')['Field']
    VanFloatingBubble: typeof import('vant/es')['FloatingBubble']
    VanForm: typeof import('vant/es')['Form']
    VanIcon: typeof import('vant/es')['Icon']
    VanImage: typeof import('vant/es')['Image']
    VanList: typeof import('vant/es')['List']
    VanLoading: typeof import('vant/es')['Loading']
    VanPicker: typeof import('vant/es')['Picker']
    VanPopup: typeof import('vant/es')['Popup']
    VanPullRefresh: typeof import('vant/es')['PullRefresh']
    VanRadio: typeof import('vant/es')['Radio']
    VanRadioGroup: typeof import('vant/es')['RadioGroup']
    VanSkeleton: typeof import('vant/es')['Skeleton']
    VanSkeletonImage: typeof import('vant/es')['SkeletonImage']
    VanSkeletonParagraph: typeof import('vant/es')['SkeletonParagraph']
    VanStep: typeof import('vant/es')['Step']
    VanSteps: typeof import('vant/es')['Steps']
    VanTab: typeof import('vant/es')['Tab']
    VanTabbar: typeof import('vant/es')['Tabbar']
    VanTabbarItem: typeof import('vant/es')['TabbarItem']
    VanTabs: typeof import('vant/es')['Tabs']
  }
}

在vite.config.ts添加相关配置

import Components from 'unplugin-vue-components/vite' 

plugins: [
    Components(
      {
        dts: 'types/components.d.ts', // 在这里需要配置想要全局使用的组件
        dirs: ['src/components'], // 自己封装的组件目录
        resolvers: [VantResolver()],
      }
    )
  ],

项目index.html中可以加下边代码控制不可以进行页面缩放

  <meta
    name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
    />