背景

首先来看看之前我分享过的一个 vue stack 模板:

• modern-vue-template

特点

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

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

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

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

• 🦾 使用 Rush搭建 Monorepo

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

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

• 🎨 使用 prettier 和 pretty-quick 进行代码自动格式化

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

• 📦 自动引入组件

• 🍍 使用 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 自动导入 在你的项目变得越来越大时可能会令你头疼

感受

• Monorepo 在代码的管理上（逻辑、组件复用上）更具有优势

• Rush 目前的生态相比于Lerna够用且好用

• Vite在开发环境优秀的速度表现已经让我们爱不释手，那么写一个组件（或者项目）她会是我们的首选

其他

Flutter 和 Tarui 为我们在跨端上提供更多的选择，但是基于目前的生态，原生端 App 的技术选择Flutter或许最值得投资。