快速地start-next-template 创建 Web 应用
特性
-
🗂 基于文件的路由 -
📦 组件自动化加载 -
📑 布局系统 -
📲 PWA -
🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎 -
🔥 使用 新的<script setup>
语法 -
🤙🏻 默认开启 响应性语法糖
-
📥 API 自动加载 - 直接使用 Composition API 无需引入 -
🖨 使用 vite-ssg 进行服务端生成 (SSG) -
🦔 使用 critters 的生成关键 CSS -
🦾 TypeScript, 当然 -
⚙️ 结合 GitHub Actions,使用 Vitest 进行单元测试, Cypress 进行 E2E 测试 -
☁️ 零配置部署 Netlify
预配置
UI 框架
- UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
Icons
- Iconify - 使用任意的图标集,浏览:
🔍 Icônes - UnoCSS 的纯 CSS 图标方案
插件
- Vue Router
vite-plugin-pages
- 以文件系统为基础的路由vite-plugin-vue-layouts
- 页面布局系统
- Pinia - 直接的, 类型安全的, 使用 Composition api 的轻便灵活的 Vue 状态管理
unplugin-vue-components
- 自动加载组件unplugin-auto-import
- 直接使用 Composition API 等,无需导入vite-plugin-pwa
- PWAvite-plugin-md
- Markdown 作为组件,也可以让组件在 Markdown 中使用markdown-it-prism
- Prism 的语法高亮prism-theme-vars
- 利用 CSS 变量自定义 Prism.js 的主题
- Vue I18n - 国际化
vite-plugin-vue-i18n
- Vue I18n 的 Vite 插件
- VueUse - 实用的 Composition API 工具合集
vite-ssg-sitemap
- 站点地图生成器@vueuse/head
- 响应式地操作文档头信息
编码风格
- 使用 Composition API 地
<script setup>
SFC 语法 - ESLint 配置为 @antfu/eslint-config, 单引号, 无分号.
开发工具
- TypeScript
- Vitest - 基于 Vite 的单元测试框架
- Cypress - E2E 测试
- pnpm - 快, 节省磁盘空间的包管理器
vite-ssg
- 服务端生成- critters - 关键 CSS 生成器
- Netlify - 零配置的部署
- VS Code 扩展
- Vite - 自动启动 Vite 服务器
- Volar - Vue 3
<script setup>
IDE 支持 - Iconify IntelliSense - 图标内联显示和自动补全
- i18n Ally - 多合一的 I18n 支持
- ESLint
衍生项目
由于这个模板的业务场景非常的局限,下面提供了一个精心策划的列表,列出了社区维护的具有不同偏好和功能集的衍生项目。也可以看看他们。当然也欢迎你 PR 提供自己的项目!
官方
- start-next-template-lite - start-next-template 的轻量版本
- start-next-template-nuxt3 - start-next-template 的 Nuxt 3 版本
- start-next-template-nuxt-bridge - start-next-template 的 Nuxt2 桥接版本
- start-next-template-webext - 开箱即用的浏览器扩展 vite 模板
现在可以试试!
start-next-template 需要 Node 版本 >=14
GitHub 模板
克隆到本地
如果您更喜欢使用更干净的 git 历史记录手动执行此操作
npx degit dbudaiya/start-next-template my-start-next-template-app
cd my-start-next-template-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
下去,稍等一下后,你的应用将被创建.