zhengwenming / vue3-ts-vite-mobile-template

vite+ts+vue3搭建的移动端webapp的模板框架demo

vue3-mobile-template

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

利用handleHtml.js处理 打包产物dist里面的index.html种的不需要元素or标签

webview中集成esmodule是一件很麻烦的事情，所以需要使用vite把vue3打包成非esmodule的方式，从而让打包产物支持file协议，能在移动端的wkwebview中正常加载。

node ./handleHtml.js

最后把dist文件夹内的文件copy到移动端项目中，比如xcode项目中，用wkwebview去加载就可以了