Skip to content

Latest commit

 

History

History
89 lines (63 loc) · 2.55 KB

README_zh-CN.md

File metadata and controls

89 lines (63 loc) · 2.55 KB

html5-cli

English document

Downloads Version License

快速创建针对移动端的HTML项目,支持对未使用构建工具的项目提供自动刷新页面的能力。

安装

第一次使用前,需要先全局安装html5-cli(后面再创建项目时不需要再执行这个命令了):

npm install -g html5-cli

然后,你就可以在你的终端中使用html5,或者使用别名h5了。

创建项目

# 将<project-name>替换成实际项目名(这里`h5`也可以换成`html5`,作用相同,看你喜欢用哪个命令)
h5 init <project-name>

然后终端会提示你选择一个模板。目前,提供的模板有2个:

classic模板

该模板非常原始,仅包括一些html、css、js等文件,不含Webpack、Vite等构建工具。

如果你想在开发时享受到自动刷新页面的效果,可以使用html5 build命令,具体见后文描述。

vue3模板

该模板项目特性如下:

  • ⚡ Vue3 + Vite4
  • 🍕 TypeScript
  • ✨ Vant4 组件库
  • 🌀 Tailwindcss 原子类框架
  • 🍍 Pinia 状态管理
  • 🌓 支持深色模式
  • Vue-router 4
  • 支持 SVG 图标自动注册组件
  • vw 视口适配
  • Axios 封装
  • 打包资源 gzip 压缩
  • 开发环境支持 Mock 数据
  • ESLint
  • 首屏加载动画
  • 开发环境调试面板Eruda
  • 生产环境 CDN 依赖

自动刷新页面

对于未使用构建工具(如Webpack、Vite等)的项目,比如 classic 模板,可以用下面的命令来提供自动刷新页面的功能。

# 默认使用 8080 端口
html5 build

# 也可以指定其他端口
html5 build --port 8081

当前目录下的任何文件(除了后缀名为.min.js.min.css的文件)改动,都会触发浏览器中访问页面的自动刷新效果。

致谢

模版基于vue3-h5-template

License

本项目采用MIT协议