# vue3-h5 **Repository Path**: yuyingqianduan/vue3-h5 ## Basic Information - **Project Name**: vue3-h5 - **Description**: vue3+vite2+国际化+ts搭建的移动端项目架子 - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 0 - **Created**: 2021-06-27 - **Last Updated**: 2024-08-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Vue 3 + Typescript + Vite #### 项目初始化 yarn or cnpm or npm 安装 【本项目为了速度一律 cnpm】 cnpm init @vitejs/app or yarn create @vitejs/app 或者快捷命令 cnpm init @vitejs/app my-vue-app --template vue-ts Node.js: - 版本最好大于 12.0.0 yarn > npm > cnpm: - 包管理工具 ### 安装依赖 cnpm i ### 安装路由 cnpm i vue-router@4 -S 【--save】 ### 安装 vuex cnpm i vuex@next -S 【--save】 ### 安装国际化 cnpm i vue-i18n@next -S cnpm i js-cookie -S cnpm i @types/js-cookie -D console.log(import.meta.env.VITE_APP_BASE_URL, 'VITE_APP_BASE_URL') console.log(process.env.NODE_ENV) ### 启动项目 cnpm run dev ### 代码规范 vscode 需要安装的相关插件 Eslint Prettier Prettier Eslint 三个即可 cnpm i eslint -D 根目录下创建 .eslintrc.js 文件 eslint 官方配置文档：https://eslint.org/docs/user-guide/configuring/configuration-files#using-configuration-files node 环境的类型检查 cnpm i @types/node -D cnpm i prettier -D 根目录下创建 .prettierrc.js 文件 prettier 官方配置文档：https://prettier.io/docs/en/ 安装相关依赖 cnpm i @typescript-eslint/eslint-plugin -D cnpm i @typescript-eslint/parser -D cnpm i eslint-config-prettier -D cnpm i eslint-plugin-prettier -D cnpm i eslint-plugin-vue -D cnpm i eslint-define-config -D ## vscode setting.json 配置文件的配置 // 每次保存时将代码按 eslint 格式进行保存 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 添加 vue 支持 "eslint.validate": ["javascript", "vue", "html"], "editor.fontSize": 14, // 控制字体大小(像素)。 "files.autoSave": "onWindowChange", // 当窗口失去焦点时，将自动保存未保存的编辑器。 "editor.formatOnSave": false, // 在保存时格式化文件。格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭。 "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行。 "git.ignoreMissingGitWarning": true, // 忽略“缺失 Git”的警告。 "workbench.activityBar.visible": true, // 控制工作台中活动栏的可见性。 "workbench.statusBar.visible": true, // 控制工作台底部状态栏的可见性。 "workbench.startupEditor": "newUntitledFile", // 打开新的无标题文件 (仅在打开空工作区时适用)。 "terminal.integrated.fontSize": 14, // 控制终端的字号(以像素为单位)。 "open-in-browser.default": "chrome", // 打开默认浏览器 "explorer.confirmDelete": false, // 控制资源管理器是否在把文件删除到废纸篓时进行确认。 "explorer.confirmDragAndDrop": false, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认。 "eslint.options": { "extensions": [ ".js", ".vue", ".ts", ".tsx", ".jsx" ] }, "eslint.validate": [ "javascript", "javascriptreact", "vue-html", "vue"], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "terminal.integrated.rendererType": "dom", // dom: 使用基于回退 DOM 的呈现器。 "git.path": "F:\\Git\\bin\\bash.exe", // Git 可执行文件的路径和文件名 "workbench.sideBar.location": "left", // 控制侧边栏和活动栏的位置。它们可以显示在工作台的左侧或右侧。 "editor.fontFamily": "JetBrains Mono,Consolas, 'Courier New', monospace", // 字体 "editor.tabSize": 2, // 一个制表符等于的空格数。 "editor.detectIndentation": false, // 控制是否在打开文件时，基于文件内容自动检测 "git.confirmSync": false, // 同步 Git 存储库前请先进行确认。 "files.associations": { "_.cjson": "jsonc", "_.wxss": "css", "_.wxs": "javascript", "_.nvue": "vue" }, "search.followSymlinks": false, // 控制是否在搜索中跟踪符号链接。 "[json]": { "editor.quickSuggestions": { // 控制是否在键入时自动显示建议。 "strings": true }, "editor.suggest.insertMode": "replace", // 控制接受补全时是否覆盖单词。请注意，这取决于扩展选择使用此功能。 "editor.defaultFormatter": "HookyQR.beautify" // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。 }, "editor.fontLigatures": "null", // 启用/禁用字体连字("calt" 和 "liga" 字体特性)。将此更改为字符串，可对 "font-feature-settings" CSS 属性进行精细控制。 "workbench.editor.enablePreview": false, "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.suggestSelection": "first", "prettier.semi": false, "git.ignoreRebaseWarning": true, "diffEditor.ignoreTrimWhitespace": false, "editor.renderIndentGuides": false, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "typescript.updateImportsOnFileMove.enabled": "always", "terminal.integrated.automationShell.windows": "F:\\Git\\bin\\bash.exe", "terminal.integrated.shell.windows": "F:\\Git\\bin\\bash.exe" ### git 代码提交 cnpm i husky lint-staged -D 【git 代码提交规范】 package.json 文件中配置如下 cnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest babel-eslint -D cnpm i eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-standard eslint-plugin-promise -D ### 移动端适配问题 先说特别的 iPhonex 的适配 iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量： safe-area-inset-left：安全区域距离左边边界距离 safe-area-inset-right：安全区域距离右边边界距离 safe-area-inset-top：安全区域距离顶部边界距离 safe-area-inset-bottom：安全区域距离底部边界距离只有设置了 viewport-fit=cover，才能使用 constant 函数 body { padding-bottom: constant(safe-area-inset-bottom); } fixed 元素的适配 { padding-bottom: constant(safe-area-inset-bottom); } 或者直接设置 body{ padding: env(safe-area-inset-left,20px) env(safe-area-inset-right,20px) env(safe-area-inset-top,20px) env(safe-area-inset-bottom,20px) } 再或者媒体查询 /_兼容 iphoneX_/ /_判断是否是 iphoneX，使用@media 媒体查询尺寸_/ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { body { top: constant(safe-area-inset-top); bottom: constant(safe-area-inset-bottom); left: constant(safe-area-inset-left); right: constant(safe-area-inset-right); } } ios11 webview 状态栏问题 【设置了固定定位页面滚动过程中两边留白】如果是纯色背景的话，可以通过给 body 设置 background 来实现填充两边的留白 less 函数 $designWidth: 750; @function px2vm($size){ @return #{100\*$size / $designWidth}vw } 调用 px2vm(50) ### vm vw 适配方案 cnpm i postcss-px-to-viewport -D ### 第三方 UI 库 vant cnpm i vant@next -S 官方文档：https://vant-contrib.gitee.io/vant/v3/#/zh-CN "browserslist": [ "defaults", // 默认 "last 2 versions", "last 2 versions", // 兼容主流浏览器的最近两个版本 "> 1%", "> 1%", // 兼容主流浏览器的最近两个版本 "> 1%", "iOS 7", // 使用的浏览器需要在市场上的份额大于 1 "iOS 7", "last 3 iOS versions" // 兼容 ios 的最新 3 个版本 ] 组件样式按需加载配置 cnpm i vite-plugin-style-import -D import styleImport from 'vite-plugin-style-import' css:{ preprocessorOptions:{ less:{ modifyVars:{}, javascriptEnabled: true } } }, plugins:[ styleImport({ libs:[ { libraryName: 'ant-design-vue', esModule: true, resolveStyle: name => `ant-design-vue/es/${name}/style/index` } ] }) ] ### 自动添加 css 前缀插件 cnpm i autoprefixer -D ### SASS 预处理器 cnpm i node-sass sass-loader sass -D ### 生产环境生成 .gz 文件 cnpm i vite-plugin-compression -D 参考文档：https://github.com/anncwb/vite-plugin-compression ### package.json 文件配置打包命令 环境变量 VITE\_ 开头 "build:dev": "vue-tsc --noEmit && vite build --mode development", "build:test": "vue-tsc --noEmit && vite build --mode test", "build:prod": "vue-tsc --noEmit && vite build --mode production" ### PWA 配置 cnpm i vite-plugin-pwa -D import { VitePWA } from 'vite-plugin-pwa' 参考文档：https://github.com/antfu/vite-plugin-pwa plugins:[ VitePWA({ manifest: {}, workbox: { skipWaiting: true, clientsClaim: true } }) ]