README.zh-CN.md

快速地^Vitesse 创建 SolidJS Web 应用

在线 Demo

English | 简体中文

特性

• ⚡️ SolidJS, Vite 3, pnpm, ESBuild - 就是快！

• 🗂 基于文件的路由

• 📦 组件自动化加载

• 📑 布局系统

• 📲 PWA

• 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

• 🎨 HopeUI - 一个基于 SolidJS 的 UI 组件库

• ⚒️ Solid Primitives - 扩展SolidJS反应性的高质量原语库.

• 😃 各种图标集为你所用

• 🌍 I18n 国际化开箱即用

• 🗒 Markdown 支持

• 📥 API 自动加载 - 直接使用 Composition API 无需引入

• 🖨 CSR, SSR, streaming SSR, or SSG via

• 🦔 使用 critters 的生成关键 CSS

• 🦾 TypeScript, 当然

• ⚙️ 结合 GitHub Actions，使用 Vitest 进行单元测试, Cypress 进行 E2E 测试

• ☁️ 零配置部署 Netlify

• ⚗️ Tauri Desktop App - 用于创建跨平台桌面应用程序

预配置

UI 框架

• UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
• HopeUI - 一个基于 SolidJS 的 UI 组件库

Icons

• Iconify - 使用任意的图标集，浏览：🔍Icônes
• UnoCSS 的纯 CSS 图标方案

插件

• SolidJS - 一个用于构建用户界面，简单高效、性能卓越的JavaScript库.
• unplugin-auto-import - 自动加载组件
• vite-plugin-pwa - PWA
• solid-primitives - 扩展SolidJS反应性的高质量原语库.

编码风格

• ESLint 配置为 @xbmlz/eslint-config, 单引号, 无分号, 保存时自动修复

开发工具

• TypeScript
• Vitest - 基于 Vite 的单元测试框架
• Cypress - E2E 测试
• pnpm - 快, 节省磁盘空间的包管理器
• Netlify - 零配置的部署
• VS Code 扩展
  • Vite - 自动启动 Vite 服务器
  • Iconify IntelliSense - 图标内联显示和自动补全
  • i18n Ally - 多合一的 I18n 支持
  • ESLint

衍生项目

由于这个模板的业务场景非常的局限，下面提供了一个精心策划的列表，列出了社区维护的具有不同偏好和功能集的衍生项目。也可以看看他们。当然也欢迎你 PR 提供自己的项目！

现在可以试试!

Vitesse-solid 需要 Node 版本 >=14.18

GitHub 模板

使用这个模板创建仓库.

克隆到本地

如果您更喜欢使用更干净的 git 历史记录手动执行此操作

npx degit xbmlz/vitesse-solid my-vitesse-solid-app
cd my-vitesse-solid-app
pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm

清单

使用此模板时，请尝试按照清单正确更新您自己的信息

• 在 LICENSE 中改变作者名
• 在 App.vue 中改变标题
• 在 vite.config.ts 更改主机名
• 在 public 目录下改变favicon
• 移除 .github 文件夹中包含资助的信息
• 整理 README 并删除路由

紧接着, 享受吧 :)

使用

开发

只需要执行以下命令就可以在 http://localhost:3333 中看到

pnpm dev

构建

构建该应用只需要执行以下命令

pnpm build

然后你会看到用于发布的 dist 文件夹被生成。

部署到 Netlify

前往 Netlify 并选择你的仓库, 一路 OK 下去，稍等一下后，你的应用将被创建.

Tauri Desktop App

开发 Tauri 桌面应用，运行

pnpm tauri:dev

打包 Tauri 桌面应用，运行

你可以参考 Tauri 文档 来了解更多关于 Tauri 的信息

pnpm tauri:build