【Vue3/Typescript】从零开始搭建H5移动端项目

一、 集成 ESLint

1.通过以下命令快速生成 ESLint 配置文件：

npx eslint --init

执行该命令后，ESLint 会通过交互式问题的方式，帮助生成配置文件eslint.config.mjs 。在此基础上，可以根据项目的需求进行一些定制化配置。

2.安装 Vue 文件解析器 vue-eslint-parser

pnpm add -D vue-eslint-parser

3.eslint.config.mjs配置

//eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js"; // JavaScript 规则
import pluginVue from "eslint-plugin-vue"; // Vue 规则
import pluginTypeScript from "@typescript-eslint/eslint-plugin"; // TypeScript 规则

import parserVue from "vue-eslint-parser"; // Vue 解析器
import parserTypeScript from "@typescript-eslint/parser"; // TypeScript 解析器

import configPrettier from "eslint-config-prettier"; // 禁用与 Prettier 冲突的规则
import pluginPrettier from "eslint-plugin-prettier"; // 运行 Prettier 规则

// 解析自动导入配置
import fs from "fs";
const autoImportConfig = JSON.parse(fs.readFileSync(".eslintrc-auto-import.json", "utf-8"));

/** @type {import('eslint').Linter.Config[]} */
export default [
  // 指定检查文件和忽略文件
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
    ignores: ["**/*.d.ts"],
  },
  // 全局配置
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        ...autoImportConfig.globals,
        ...{
          PageQuery: "readonly",
          PageResult: "readonly",
          OptionType: "readonly",
          ResponseData: "readonly",
          ExcelResult: "readonly",
          TagView: "readonly",
          AppSettings: "readonly",
          __APP_INFO__: "readonly",
        },
      },
    },
    plugins: { prettier: pluginPrettier },
    rules: {
      ...configPrettier.rules, // 关闭与 Prettier 冲突的规则
      ...pluginPrettier.configs.recommended.rules, // 启用 Prettier 规则
      "prettier/prettier": "error", // 强制 Prettier 格式化
      "no-unused-vars": [
        "error",
        {
          argsIgnorePattern: "^_", // 忽略参数名以 _ 开头的参数未使用警告
          varsIgnorePattern: "^[A-Z0-9_]+$", // 忽略变量名为大写字母、数字或下划线组合的未使用警告（枚举定义未使用场景）
          ignoreRestSiblings: true, // 忽略解构赋值中同级未使用变量的警告
        },
      ],
    },
  },
  // JavaScript 配置
  pluginJs.configs.recommended,

  // TypeScript 配置
  {
    files: ["**/*.ts"],
    ignores: ["**/*.d.ts"], // 排除d.ts文件
    languageOptions: {
      parser: parserTypeScript,
      parserOptions: {
        sourceType: "module",
      },
    },
    plugins: { "@typescript-eslint": pluginTypeScript },
    rules: {
      ...pluginTypeScript.configs.strict.rules, // TypeScript 严格规则
      "@typescript-eslint/no-explicit-any": "off", // 允许使用 any
      "@typescript-eslint/no-empty-function": "off", // 允许空函数
      "@typescript-eslint/no-empty-object-type": "off", // 允许空对象类型
    },
  },

  // Vue 配置
  {
    files: ["**/*.vue"],
    languageOptions: {
      parser: parserVue,
      parserOptions: {
        parser: parserTypeScript,
        sourceType: "module",
      },
    },
    plugins: { vue: pluginVue, "@typescript-eslint": pluginTypeScript },
    processor: pluginVue.processors[".vue"],
    rules: {
      ...pluginVue.configs["vue3-recommended"].rules, // Vue 3 推荐规则
      "vue/no-v-html": "off", // 允许 v-html
      "vue/multi-word-component-names": "off", // 允许单个单词组件名
    },
  },
];

二、按需自动导入

1.安装

npm install unplugin-auto-import -D

2.在vite.config.ts中更改配置

import AutoImport from "unplugin-auto-import/vite";
export default defineConfig（{
	plugins:[
		vue(),
		...
	    AutoImport({
	      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
	      imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
	      resolvers: [
	        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
	        ElementPlusResolver({
	          importStyle: "sass",
	        }),
	      ],
	      eslintrc: {
	        // 是否自动生成 eslint 规则，建议生成之后设置 false
	        enabled: false,
	        // 指定自动导入函数 eslint 规则的文件
	        filepath: "./.eslintrc-auto-import.json",
	        globalsPropValue: true,
	      },
	      // 是否在 vue 模板中自动导入
	      vueTemplate: true,
	      // 指定自动导入函数TS类型声明文件路径 (false:关闭自动生成)
	      dts: false,
	      // dts: "src/typings/auto-imports.d.ts",
	    }),
	]
}）

三、UI框架选择

UI框架使用Vant

Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

四、Rem 布局适配

使用 rem 单位进行适配，推荐使用以下两个工具：

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位

lib-flexible 用于设置 rem 基准值

1.安装postcss-pxtorem

 npm install  postcss-pxtorem  -D

2.新建postcss.config.ts

//postcss.config.ts
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 37.5,//设计稿宽度%10 比如 375
      propList: ["*"],
    },
  },
};

五、 底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行安全区适配。Vant 中部分组件提供了 safe-area-inset-top 或 safe-area-inset-bottom 属性，设置该属性后，即可在对应的机型上开启适配，如下示例：

<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

<!-- 开启顶部安全区适配 -->
<van-nav-bar safe-area-inset-top />

<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />