当前位置：首页 > news >正文

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

news 2025/6/13 10:59:32

一、集成 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.mjsimport 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 规则，建议生成之后设置 falseenabled: 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 比如 375propList: ["*"],},},
};

五、底部安全区适配

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

<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<metaname="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 />