xueyawen
/
vue3-vant-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add PWA support (#64)

This commit is contained in:
CharleeWa 2024-03-08 12:01:56 +08:00
parent 24bb01b2bd
commit b75228c45d
15 changed files with 1005 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -36,6 +36,8 @@
- 📑 [Layout system](./src/layouts) - 📑 [Layout system](./src/layouts)
- 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
- 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine - 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
- 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227) - 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227)
@ -92,6 +94,7 @@
- [vite-plugin-vue-devtools](https://github.com/vuejs/devtools-next) - Designed to enhance the Vue developer experience - [vite-plugin-vue-devtools](https://github.com/vuejs/devtools-next) - Designed to enhance the Vue developer experience
- [vueuse](https://github.com/antfu/vueuse) - collection of useful composition APIs - [vueuse](https://github.com/antfu/vueuse) - collection of useful composition APIs
- [@unhead/vue](https://github.com/unjs/unhead) - manipulate document head reactively - [@unhead/vue](https://github.com/unjs/unhead) - manipulate document head reactively
- [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
### Coding Style ### Coding Style

3
README.zh-CN.md
View File

@ -36,6 +36,8 @@
- 📑 [布局系统](./src/layouts) - 📑 [布局系统](./src/layouts)
- 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
- 🎨 [UnoCSS](https://github.com/antfu/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎 - 🎨 [UnoCSS](https://github.com/antfu/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎
- 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227) - 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)
@ -92,6 +94,7 @@
- [vite-plugin-vue-devtools](https://github.com/vuejs/devtools-next) - 旨在增强Vue开发者体验的Vite插件 - [vite-plugin-vue-devtools](https://github.com/vuejs/devtools-next) - 旨在增强Vue开发者体验的Vite插件
- [vueuse](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集 - [vueuse](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集
- [@unhead/vue](https://github.com/unjs/unhead) - 响应式地操作文档头信息 - [@unhead/vue](https://github.com/unjs/unhead) - 响应式地操作文档头信息
- [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
### 编码风格 ### 编码风格

30
build/vite/index.ts
View File

@ -12,6 +12,7 @@ import VueDevTools from 'vite-plugin-vue-devtools'
import mockDevServerPlugin from 'vite-plugin-mock-dev-server' import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
import Layouts from 'vite-plugin-vue-layouts' import Layouts from 'vite-plugin-vue-layouts'
import UnoCSS from 'unocss/vite' import UnoCSS from 'unocss/vite'
import { VitePWA } from 'vite-plugin-pwa'
import { createViteVConsole } from './vconsole' import { createViteVConsole } from './vconsole'
export function createVitePlugins() { export function createVitePlugins() {
@ -72,6 +73,35 @@ export function createVitePlugins() {
// https://github.com/webfansplz/vite-plugin-vue-devtools // https://github.com/webfansplz/vite-plugin-vue-devtools
VueDevTools(), VueDevTools(),
// https://github.com/antfu/vite-plugin-pwa
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
manifest: {
name: 'vue3-vant-mobile',
short_name: 'vue3-vant-mobile',
theme_color: '#ffffff',
icons: [
{
src: '/pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: '/pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable',
},
],
},
}),
vueJsx(), vueJsx(),
visualizer(), visualizer(),

4
index.html
View File

@ -3,7 +3,9 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
<link rel="icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/pwa-192x192.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f6d2d2">
<meta name="msapplication-TileColor" content="#f6d2d2">
<script> <script>
;(function () { ;(function () {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

3
package.json
View File

@ -9,7 +9,7 @@
"dev": "cross-env MOCK_SERVER_PORT=8086 vite", "dev": "cross-env MOCK_SERVER_PORT=8086 vite",
"build": "vue-tsc --noEmit && vite build", "build": "vue-tsc --noEmit && vite build",
"build:dev": "vue-tsc --noEmit && vite build --mode=development", "build:dev": "vue-tsc --noEmit && vite build --mode=development",
"preview": "npm run build && vite preview", "preview": "vite preview",
"lint": "eslint .", "lint": "eslint .",
"lint:fix": "eslint . --fix", "lint:fix": "eslint . --fix",
"test": "vitest", "test": "vitest",
@ -67,6 +67,7 @@
"unplugin-vue-router": "^0.7.0", "unplugin-vue-router": "^0.7.0",
"vite": "^5.0.12", "vite": "^5.0.12",
"vite-plugin-mock-dev-server": "^1.4.7", "vite-plugin-mock-dev-server": "^1.4.7",
"vite-plugin-pwa": "^0.19.2",
"vite-plugin-vconsole": "^2.1.1", "vite-plugin-vconsole": "^2.1.1",
"vite-plugin-vue-devtools": "^7.0.14", "vite-plugin-vue-devtools": "^7.0.14",
"vite-plugin-vue-layouts": "^0.11.0", "vite-plugin-vue-layouts": "^0.11.0",

918
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

4
public/favicon-dark.svg Normal file
View File

@ -0,0 +1,4 @@
<svg t="1709866807903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4913" width="32" height="32">
<path d="M512 598.528a111.232 111.232 0 0 0-111.232 111.2064V870.4h222.464v-160.6656c0-61.44-49.792-111.232-111.232-111.232z m0 58.0608c-30.72 0-55.6032 24.9088-55.6032 55.6288v105.0368h111.2064v-105.0368c0-30.72-24.8832-55.6288-55.6032-55.6288z" fill="#FB4D31" p-id="4914"></path>
<path d="M542.08 270.208l45.2608-78.5408a24.5248 24.5248 0 0 0 0-25.6A26.4448 26.4448 0 0 0 564.1472 153.6a26.3424 26.3424 0 0 0-22.5792 13.44L512 217.6256l-29.5424-50.5344c-4.5824-8.192-13.184-13.312-22.5536-13.4912a26.4448 26.4448 0 0 0-23.2448 12.4928 24.5248 24.5248 0 0 0 0 25.6l45.2352 78.5152L156.928 832.768a24.4736 24.4736 0 0 0 0.3328 25.088c4.8384 7.8336 13.3888 12.544 22.5792 12.5184h664.3456c9.3184 0 17.92-4.7616 22.6304-12.4672a24.4736 24.4736 0 0 0 0.3072-25.088l-325.0176-562.688v0.0512zM619.52 816.64h-33.3568c-12.3648 0-9.6768 0.1024-65.0496 0H512c-55.3728 0.1024-24.704 0-61.7984 0H225.28L512 322.1248 798.72 816.64h-179.2z" fill="#ffffff" p-id="4915"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

4
public/favicon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg t="1709866807903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4913" width="32" height="32">
<path d="M512 598.528a111.232 111.232 0 0 0-111.232 111.2064V870.4h222.464v-160.6656c0-61.44-49.792-111.232-111.232-111.232z m0 58.0608c-30.72 0-55.6032 24.9088-55.6032 55.6288v105.0368h111.2064v-105.0368c0-30.72-24.8832-55.6288-55.6032-55.6288z" fill="#FB4D31" p-id="4914"></path>
<path d="M542.08 270.208l45.2608-78.5408a24.5248 24.5248 0 0 0 0-25.6A26.4448 26.4448 0 0 0 564.1472 153.6a26.3424 26.3424 0 0 0-22.5792 13.44L512 217.6256l-29.5424-50.5344c-4.5824-8.192-13.184-13.312-22.5536-13.4912a26.4448 26.4448 0 0 0-23.2448 12.4928 24.5248 24.5248 0 0 0 0 25.6l45.2352 78.5152L156.928 832.768a24.4736 24.4736 0 0 0 0.3328 25.088c4.8384 7.8336 13.3888 12.544 22.5792 12.5184h664.3456c9.3184 0 17.92-4.7616 22.6304-12.4672a24.4736 24.4736 0 0 0 0.3072-25.088l-325.0176-562.688v0.0512zM619.52 816.64h-33.3568c-12.3648 0-9.6768 0.1024-65.0496 0H512c-55.3728 0.1024-24.704 0-61.7984 0H225.28L512 322.1248 798.72 816.64h-179.2z" fill="#000000" p-id="4915"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/pwa-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
public/pwa-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

32
public/safari-pinned-tab.svg Normal file
View File

@ -0,0 +1,32 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2232 4334 c-45 -23 -67 -67 -63 -130 0 -11 55 -113 121 -227 l120
-207 -186 -322 c-103 -178 -229 -397 -282 -488 -53 -91 -110 -190 -127 -220
-17 -30 -168 -291 -335 -580 -167 -289 -310 -536 -317 -550 -8 -14 -25 -43
-38 -65 -13 -22 -32 -56 -43 -75 -19 -35 -203 -354 -269 -465 -63 -106 -53
-178 30 -222 29 -15 171 -16 1717 -16 1855 0 1719 -5 1769 59 37 47 28 87 -50
224 -39 69 -80 141 -91 160 -26 45 -236 409 -465 805 -99 171 -191 330 -205
355 -14 25 -76 133 -138 240 -96 165 -210 363 -280 485 -10 17 -93 161 -185
320 -92 160 -176 305 -186 323 l-19 32 109 188 c140 242 133 229 133 273 -1
69 -58 119 -136 119 -58 0 -88 -30 -172 -174 -43 -75 -82 -136 -85 -136 -4 0
-13 12 -20 28 -46 90 -146 246 -166 259 -35 23 -102 27 -141 7z m388 -926 c30
-51 64 -111 76 -133 12 -22 68 -119 124 -215 56 -96 112 -193 125 -215 12 -22
55 -96 95 -165 40 -69 91 -156 113 -195 22 -38 126 -218 232 -400 105 -181
203 -350 217 -375 14 -25 74 -128 133 -230 60 -102 116 -198 125 -215 62 -107
123 -211 130 -220 6 -7 -140 -10 -433 -9 l-441 1 -1 314 c-1 273 -4 321 -19
369 -46 138 -98 215 -202 292 -63 47 -139 87 -171 89 -2 1 -25 6 -51 14 -95
25 -271 2 -362 -47 -153 -82 -263 -228 -296 -390 -4 -18 -7 -170 -8 -337 l-1
-304 -442 -1 c-293 -1 -439 2 -433 9 7 9 77 127 135 230 13 22 128 220 255
440 128 220 241 416 252 435 74 129 221 382 274 473 35 59 64 109 64 111 0 3
22 40 49 84 27 44 50 84 52 89 10 26 344 593 349 593 3 0 30 -42 60 -92z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

7
src/App.vue
View File

@ -16,6 +16,13 @@ useHead({
content: () => isDark.value ? '#00aba9' : '#ffffff', content: () => isDark.value ? '#00aba9' : '#ffffff',
}, },
], ],
link: [
{
rel: 'icon',
type: 'image/svg+xml',
href: () => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg',
},
],
}) })
const appStore = useAppStore() const appStore = useAppStore()

1
src/components.d.ts vendored
View File

@ -20,6 +20,5 @@ declare module 'vue' {
VanNavBar: typeof import('vant/es')['NavBar'] VanNavBar: typeof import('vant/es')['NavBar']
VanSpace: typeof import('vant/es')['Space'] VanSpace: typeof import('vant/es')['Space']
VanSwitch: typeof import('vant/es')['Switch'] VanSwitch: typeof import('vant/es')['Switch']
VanTag: typeof import('vant/es')['Tag']
} }
} }

3
tsconfig.json
View File

@ -13,7 +13,8 @@
"types": [ "types": [
"node", "node",
"unplugin-vue-router/client", "unplugin-vue-router/client",
"vite-plugin-vue-layouts/client" "vite-plugin-vue-layouts/client",
"vite-plugin-pwa/client"
], ],
"allowJs": true, "allowJs": true,
"strictNullChecks": false, "strictNullChecks": false,