两行命令创建一个Opentiny后台管理系统

2023-10-30 18:34:48 浏览数 (2)

昨天开始,我们开始分享一些比较好用的工作提效软件或者一些开源项目的解析,取长补短,目的就是最后独立开发完成属于自己的项目。

最近看到华为开源的前端开源组件库,opentiny,讲求一个轻量化,适合快速搭建后台系统。

官网:

代码语言:javascript复制
https://opentiny.design/

OpenTiny 仓库:

代码语言:javascript复制
https://github.com/opentiny/

Vue 组件库:

代码语言:javascript复制
https://github.com/opentiny/tiny-vue

Angular 组件库:

代码语言:javascript复制
https://github.com/opentiny/ng

CLI 工具:

代码语言:javascript复制
https://github.com/opentiny/tiny-cli

随后想了解下,看到别的博主在发文介绍,说简单到有手就会,只要两行命令就能解决,这不立马尝试一下。

文章介绍相对比较简单,还真只有两行命令:

代码语言:javascript复制
// 安装 TinyCLI
npm install @opentiny/cli npminstall@3 -g
// 创建 TinyVue Pro 项目
tiny init vue-pro

我这边用的node版本是16.19,开始安装

可能是我的node版本不对还是哪里粘贴不对,总有刁民想害我装不成:

安装中,卡在这等了半天没动静,心想,这网络着实着急,得设置国内源,我就用来阿里的源

果然安装成功。

那就开始执行第二个命令:

说没找到插件,再接着安装:

到这是不是疑惑了,不要放弃,这个时候就该去官网看看了,看样子两行命令解决不了。

果然官网还是靠谱些,推荐安装node16.13.0,这就去装:

一顿安装

tiny init vue-pro还不着急用,先试试这个套件开发会不会报错,就是开发tiny套件和小插件的:

启动速度,目前看来确实比较快。启动后发现,这个是开发小插件的东西,我这还没有项目所以就是空的,接着我们来试一下vue-pro这个项目,到这里成功启动,界面确实不错,现在除了常用的elment、antdesign还有这个opentiny,前端开发的组件库现在越来越多了,有更多的选择了,所以喜欢用什么就用什么。

登录页:

登录进去看看:

看界面和别的ui库的大同小异,基本该有的都有了,看起来感觉还有点小清新。

还有一个自己创建主题的产品比较好玩,感兴趣的可以看看。

好了对于opentiny的介绍就到这了,从这我也得总结经验,以后写文章的时候得知道自己的阅读对象是谁,如果是熟练的前端,估计也不会看这种文章,所以一般都是刚入门或者经验不足的朋友,我得写清楚环境以及软件版本,这样就可以避免类似两行命令搞定一个项目的问题。

本文环境:

Node:16.13.0

Npm:8.1.0

opentiny官方文档:

代码语言:javascript复制
https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/envpreparation

大家按着这个环境,再按照官方说明去安装,就可以实现开发环境的呈现了。

至于如何选择,如果是简单的后台系统可以选择opentiny,复杂大型的还是偏向于element和ant-design毕竟文档丰富,社区也活跃

0 人点赞