关于前端:Create-Vite-App-支持-OpenTiny-啦🎉

大家好，我是 Kagol，集体公众号：前端开源星球。

一个月前，日日自新写了一篇介绍 Create Vite App 开源我的项目的文章：

基于vite 4.x 疾速搭建开箱即用，高度可定制化模版脚手架

Create Vite App 是基于 esbuild + commander + ejs 模板渲染进行开发脚手架，用于创立 vite4.x typescript5.x vite 开箱即用模板，致力于打造不同框架，多种生态，开箱即用的脚手架。

反对各种插件以及不同组件库的可拔插式抉择，来帮忙你疾速从0搭建web利用的脚手架。

过后还不反对 OpenTiny，现已完满反对 OpenTiny 组件库🎉

让咱们来体验下吧！

对 OpenTiny 组件库的反对

依据 Create Vite App 的官网文档，只须要一行代码即可创立一个 Vite + Vue3 + TypeScript 工程，并能够配置丰盛的性能，比方 Vue 路由、Pinia 状态管理工具、代码标准工具 ESLint / Prettier、UI 组件库、Vite 插件等。

npx create-vite-template@latest

从上图能够看到 UI 组件库列表中的第二个就是 TinyVue

抉择想要的配置之后，会主动装置依赖，胜利之后即可通过 pnpm dev 本地启动你的我的项目啦！

这是一个空我的项目，但曾经具备了开发一个业务所须要的根底性能：

• pnpm 包管理器
• Vite 本地启动和构建
• Vue3 + TypeScript
• SCSS 款式
• Vue 路由
• Pinia 状态治理
• ESLint / Prettier 代码标准工具
• 一个称手的 UI 组件库：OpenTiny

你能够基于这个根底我的项目搭建本人的业务。

可能还差一个单元测试😋

欢送大家在评论区留言，你感觉 Create Vite App 还差什么。

和 Vite 的区别

Create Vite App 是基于 Vite 的，但在其根底上减少了很多业务开发中罕用的工程化工具，不须要本人手动引入，能够节俭搭建我的项目的工夫。

Vite 创立进去的我的项目只有一个 Vite + Vue3 + TypeScript，没有其余性能，须要本人手动装置和配置。

和 TinyCLI 的区别

TinyCLI 是一个笼罩前端开发全流程的 CLI 工具，反对更加丰盛的个性：

1. 💻 跨平台，兼容 windows、mac、linux 三个平台
2. 🛠 插件体系，丰盛的效率插件、可信插件、流程插件等，笼罩从开发->构建->公布的所有生命周期
3. 📦 开箱即用，联合丰盛的教训积淀出的我的项目开发最佳实际，提供基于支流业务场景的我的项目解决方案
4. ⏳ 工作流机制，提供了比 npm scripts 更弱小的工作流运行机制
5. 🏹 主动降级，无需手动装置和降级插件，这一切都是自动化实现

比方以下命令能够创立一个基于 Vite + Vue3 + TypeScript + OpenTiny 的中后盾零碎。

tiny init vue-pro

蕴含登录鉴权、路由导航、布局切换、国际化、个性化主题、Mock 数据、响应式、状态治理等丰盛的性能。

登录页：

看板页：

工作台：

相比 Create Vite App，反对更加丰盛的性能，除了能创立中后盾零碎之外，还能够通过套件和插件为你的我的项目反对更丰盛的性能。

具体能够理解 TinyCLI 官网：

https://opentiny.design/tiny-cli/

分割咱们：

• 官网公众号：OpenTiny
• OpenTiny 官网
• Vue 组件库（欢送 Star 🌟）

往期文章举荐

• 🌈我要做开源第二季20230414期：OpenTiny 初体验
• 🌈应用 TinyCLI 两行命令创立一个好看大气的 Admin 零碎
• [🌈一个 OpenTiny，Vue2 Vue3 都反对！]()
• 🌈历史性的时刻！OpenTiny 跨端、跨框架组件库正式降级 TypeScript，10 万行代码重获新生！
• 🌈OpenTiny 的这些特色组件，很实用，但你应该没见过