-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
23488db
commit 1996a38
Showing
2 changed files
with
64 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,61 @@ | ||
# Vue 3 + TypeScript + Vite | ||
# Zeus | ||
|
||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | ||
**Zeus** 是一个 **vite** 插件,通过简单的插件引入,轻松获得缓存 app 本地文件与 fetch 请求的资源的能力,可以通过 [Zeus](https://yydounai1234.github.io/Zeus/) 查看示例。 | ||
|
||
## Recommended IDE Setup | ||
## 使用方法 | ||
|
||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) | ||
* 下载插件 | ||
```javascript | ||
npm install zeus-plugin --save-dev | ||
``` | ||
* 在 **vite.config.ts** 中添加插件 | ||
|
||
## Type Support For `.vue` Imports in TS | ||
```typescript | ||
import zeusPlugin from 'zeus-plugin' | ||
plugins: [...other plugins, zeusPlugin({ | ||
/** cache 版本号 */ | ||
cacheVersion: 1, | ||
/** sw 版本号 */ | ||
swVersion: 1, | ||
/** 初始缓存文件 */ | ||
appShellFiles: ["/source.webp"], | ||
/** 拦截缓存文件的正则 */ | ||
patten: /image|png/ | ||
})] | ||
``` | ||
|
||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps: | ||
完整配置如下: | ||
|
||
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled. | ||
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. | ||
|
||
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). | ||
```typescript | ||
type ZeusOption = Partial<{ | ||
/** | ||
* 作用域 | ||
*/ | ||
scope: string | ||
/** | ||
* 前缀 | ||
*/ | ||
prefix: string | ||
/** | ||
* SW 名 | ||
*/ | ||
swName: string | ||
}> & { | ||
/** | ||
* SW 版本号 | ||
*/ | ||
swVersion: string | ||
/** | ||
* 缓存版本号 | ||
*/ | ||
cacheVersion: string | ||
/** | ||
* 初始缓存文件 | ||
*/ | ||
appShellFiles: string[] | ||
/** | ||
* 缓存请求正则 | ||
*/ | ||
patten: RegExp | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters