码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 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 组件库🎉

    image.png

    让我们来体验下吧!

    对 OpenTiny 组件库的支持

    根据 Create Vite App 的官网文档,只需要一行代码即可创建一个 Vite + Vue3 + TypeScript 工程,并可以配置丰富的功能,比如 Vue 路由、Pinia 状态管理工具、代码规范工具 ESLint / Prettier、UI 组件库、Vite 插件等。

    npx create-vite-template@latest
    

    WX20230519-221514@2x.png

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

    选择想要的配置之后,会自动安装依赖,成功之后即可通过 pnpm dev 本地启动你的项目啦!

    效果图.png

    这是一个空项目,但已经具备了开发一个业务所需要的基础功能:

    • 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 数据、响应式、状态管理等丰富的功能。

    登录页:

    image.png

    看板页:

    image.png

    工作台:

    image.png

    相比 Create Vite App,支持更加丰富的功能,除了能创建中后台系统之外,还可以通过套件和插件为你的项目支持更丰富的功能。

    详细可以了解 TinyCLI 官网:

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

    联系我们:

    • 官方公众号:OpenTiny
    • OpenTiny 官网
    • Vue 组件库(欢迎 Star 🌟)

    往期文章推荐

    • 🌈我要做开源第二季20230414期:OpenTiny 初体验
    • 🌈使用 TinyCLI 两行命令创建一个美观大气的 Admin 系统
    • 🌈一个 OpenTiny,Vue2 Vue3 都支持!
    • 🌈历史性的时刻!OpenTiny 跨端、跨框架组件库正式升级 TypeScript,10 万行代码重获新生!
    • 🌈OpenTiny 的这些特色组件,很实用,但你应该没见过
  • 相关阅读:
    什么是 java 序列化?什么情况下需要序列化?
    情人节程序员用HTML网页表白【爱心表白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
    Python中的sort()方法使用基础
    2022年11月华南师范大学自考本科计算机信息管理系统加考实践题目
    基于无线通信模块对焦炉发讯装置的设计
    C++基础入门丨5. 数组——一维数组和二维数组
    Apache Airflow (十) :SSHOperator及调度远程Shell脚本
    机器视觉方案工程师,价值远不止于此
    软件设计模式之访问者模式(Visitor Pattern)
    conda创建pytorch环境报错
  • 原文地址:https://www.cnblogs.com/kagol/p/17416608.html
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号