Vue3 技术栈的一些实践思考

[redtech]

背景

首先来看看之前我分享过的一个 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或许最值得投资。

[learnshare]

思考了啥，只是一个推广吗

[redtech]

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

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

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

[redtech]

@learnshare 扩展的话 更多的会是 monorepo 相关的东西。vue3 目前已经不是我们的首选，但是基于 vue 的实践，并没完全放弃。

[redtech]

@learnshare 具体的可以查看 monorepo 分支 后续我会完善一个使用 vite 编写项目内部组件库的例子

[redtech]

@learnshare 本人不太擅长写技术类的文章，因为这里描述出来的特点 也就是实践的结果 一个好的技术框架搭配大致是这样的 当然这会随着实践慢慢有更多体会 具体的还是直接看仓库比较合适
认为不合适的话 完全忽略即可 没人求 star

[hw2ex]

vue3 不是首选？那什么是？ vue ？现在很多都开用 vue3 了

[redtech]

@hw2ex 现在我们的核心系统基本上使用 react 重构了 客户端 App 也在使用 flutter 进行重构（可能会延伸到 web 端） 基于 vue3 的存量还有一部分

[redtech]

@hw2ex vue3 的生态成熟尚需时日 而且引入的 ref reactive 也是一些心智负担 技术栈总归要收敛 在我司 React
赢了 不代表 vue3 就不好 仅仅一个选择的权衡而已

[djkloop]

感觉更多的是 rush 是如何落地项目的一些尝试，在和 lerna 上对比有哪些优势。我记得好像还有个叫 nx 的都项目管理工具。至于 vue react 无所谓...

[ccyu220]

除了以下两项，其它都是目前主流用法

🦾 使用 Rush 搭建 Monorepo

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

[redtech]

@ccyu220 主流 也是经过实践的产物 这些是被认为是值得肯定的尝试吧 每个公司的要求和选择都不一致

[redtech]

@djkloop rush 和 nx 对 monorepo 的实现相比于 lerna 都更完整 nx 没有在我司推行起来 暂时不太敢评价

[imchenlong]

楼主是之前开洗浴中心的那个老哥吗？

[redtech]

@imchenlong 对呀