Vue3+Vant+Vite H5移动端开发（二）

vue3 项目创建

使用 vue 创建项目

• 命令

npm create vue@latest

基础配置

1. 配置IP和localhost打开项目，修改'package.json'文件下的scripts配置
2. --host 0.0.0.0 显示ip地址可以打开项目
3. --open 启动项目，在浏览器中自动打开

  "scripts": {
    "dev": "vite --host 0.0.0.0 --open",
  },

2. 配置端口号，在‘vite.config.js’文件下，新增server配置

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  // 配置ip地址访问
  server: {
    // host: '0.0.0.0', //这里也可以配置 ip地址
    // open: true, // 这里也可以配置，启动项目是否自动在浏览器打开
    port: 3000, //端口号
  },
})

3. 启用'eslintrc'自动格式化代码,在‘.eslintrc.cjs’文件中，新增或修改

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting',
      // 新增下面或替换上行，都行
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
// 其他自定义规则
  rules: {
    /*
     * "off" 或 0    ==>  关闭规则
     * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
     * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
     */
    // 解决，每行，尾部有 警告波浪线
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
    //关闭组件命名规则,解决vue文件头部爆红问题
    // 'vue/multi-word-component-names': 'off',

    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符

    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'off', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'off', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',

    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off' // 对模板中的自定义组件强制执行属性命名样式
  }
}

单位适配

单位 (vw, vh, vmin, vmax)

1. 安装插件

npm i  postcss-px-to-viewport-8-plugin -D

2. 新建一个单位转换的配置位置pxChangeVh.js

// 引入单位插件
import pptv from 'postcss-px-to-viewport-8-plugin'

// 配置信息
const loder_pxtovw = pptv({
  unitToConvert: 'px', // 默认值`px`，需要转换的单位
  viewportWidth: 1536, // 视窗的宽度,对应设计稿宽度
  viewportHeight: 2048, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
  unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
  propList: ['*'], // 转化为vw的属性列表
  viewportUnit: 'vw', // 指定需要转换成视窗单位
  fontViewportUnit: 'vw', // 字体使用的视窗单位
  selectorBlackList: ['.ignore-'], // 指定不需要转换为视窗单位的类
  // selectorBlackList: [':root,:host'], // 指定不需要转换为视窗单位的类
  mediaQuery: false, // 允许在媒体查询中转换`px`
  minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
  replace: true, // 是否直接更换属性值而不添加备用属性
  exclude: [], // 忽略某些文件夹下的文件或特定文件
  landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
  landscapeUnit: 'vw', // 横屏时使用的单位
  landscapeWidth: 1536, // 横屏时使用的视窗宽度
})
export default loder_pxtovw

3. 在vite.config.js文件中使用

// 引入单位转换文件
import loder_pxtovw from './pxChangeVh'

export default defineConfig({
  plugins: [
    ...
  ],
  css: {
    postcss: {
      // 使用单位转换配置
      plugins: [loder_pxtovw],
    },
  },
})

rem

1. 安装lib-flexible和postcss-pxtorem

• lib-flexible 用于添加基准值
• postcss-pxtorem 用语单位转换

2. 命令

npm i -S amfe-flexible
npm install postcss postcss-pxtorem --save-dev

3. 在跟目录添加.postcssrc.cjs文件，配置如下

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

4. 配置移动端mete标签

• 在main.js 中添加引用

import 'amfe-flexible'

5. 配置移动端mete标签

<meta  name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>