README.zh-CN.md

Modern Vue

现代化的 Vue 技术栈 支持 Micro front end 和 Monorepo 🎉。

即刻享受令人愉悦的开发体验 😄。

main 分支将保持极简以快速创建 vue3 应用。

monorepo架构的项目请查 看monorepo 分支

特点

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild - 生而为快

• ⚡️ 打包时进行压缩优化

• ⚡️ 上传静态资源至 OSS 以支持 CDN

• 🦾 通过 .env 文件进行环境隔离 轻松使用多套环境以应对开发和生产环境

• 🦾 使用 Rush搭建 Monorepo

• 🦾 使用 micro-app 作为微前端方案 配合 monorepo 轻松接入多个不同技术栈的项目

• 🎨 支持 Commitlint 以规范代码提交

• 🎨 使用 prettier 进行代码自动格式化

• 🗂 基于文件结构的路由系统

• 📦 自动引入组件

• 🍍 使用 Pinia 进行状态管理

• 📑 布局系统

• 📲 PWA

• 🎨 TailwindCSS - A utility-first CSS framework for rapid UI development.

• 😃 无妥协使用任意 icons

• 🌍 I18n

• 🗒 支持 Markdown

• 🔥 使用 <script setup> 写法进行高效开发

• 🖨 服务端页面生成 (SSG) 通过 vite-ssg

• 🦔 规范的 CSS critters

• 🦾 全面支持 TypeScript

• ⚙️ 使用 [Vitest] 单元测试 (https://github.com/vitest-dev/vitest), E2E Testing with Cypress on GitHub Actions

• ☁️ 零配置部署至 Netlify

• 扩展 Script Setup 提供组件名称 以更好的配合 Vue Devtools

示例代码:

<template>
  <div class="app">
    <RouterView />
  </div>
</template>

<script setup lang="ts" name="App"></script>

自 2022.02.24 我们移除了 API自动导入 和windiCSS这两项特性. 原因如下:

• TailwindCSS V3 已经足够快了
• API自动导入 在你的项目变得越来越大时可能会令你头疼

使用到的库

UI Frameworks

• TailwindCSS - lighter and faster, with a bunch of additional features!

图标

• Iconify - use icons from any icon sets 🔍Icônes
• unplugin-icons - icons as Vue components

插件

• Vue Router
  • vite-plugin-pages - file system based routing
  • vite-plugin-vue-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• vite-plugin-pwa - PWA
• vite-plugin-md - Markdown as components / components in Markdown
  • markdown-it-prism - Prism for syntax highlighting
  • prism-theme-vars - customizable Prism.js theme using CSS variables
• Vue I18n - Internationalization
  • vite-plugin-vue-i18n - Vite plugin for Vue I18n
• VueUse - collection of useful composition APIs
• @vueuse/head - manipulate document head reactively

编码风格

• Use Composition API with <script setup> SFC syntax

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• Cypress - E2E testing
• pnpm - fast, disk space efficient package manager
• vite-ssg - Server-side generation
  • critters - Critical CSS
• Netlify - zero-config deployment
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • ESLint

提交代码规范

commitlint 使用 cz-customizable, 如需中文提示请在 packages.json 的 config/cz-customizable/cz-customizable 改为 .cz-config.zh-CN.js

特别鸣谢

• Vitesse

运行环境

Node >=14

GitHub Template

Create a repo from this template on GitHub.

如何使用

本地开发

pnpm i

pnpm dev

打包

打包项目命令为：

pnpm build

使用 Env 环境:

pnpm build:test