一个 OpenTiny,Vue2 Vue3 都支持!
大家好,我是 Kagol,OpenTiny 开源社区运营,TinyVue 跨端、跨框架组件库核心贡献者,专注于前端组件库建设和开源社区运营。
今天给大家介绍如何同时在 Vue2 和 Vue3 项目中使用 TinyVue。
TinyVue 是一套跨端、跨框架的企业级 UI 组件库,支持 Vue 2 和 Vue 3,支持 PC 端和移动端。
特性:
- 包含 80 多个简洁、易用、功能强大的组件
- 一套代码同时支持 Vue 2 和 Vue 3
- ️ 一套代码同时支持 PC 端和移动端
- 支持国际化
- 支持主题定制
- 组件内部支持配置式开发,可支持低代码平台可视化组件配置
- 采用模板、样式、逻辑分离的跨端、跨框架架构,保障灵活性和可移植性
在 Vue2 项目中使用
创建 Vue2 项目
先用 Vue CLI 创建一个 Vue2 项目。
// 安装 Vue CLI
npm install -g @vue/cli
// 创建 Vue2 项目
vue create vue2-demo
输出以下信息说明项目创建成功
Successfully created project vue2-demo.
Get started with the following commands:
$ cd vue2-demo
$ yarn serve
创建好之后可以执行以下命令启动项目
yarn serve
输出以下命令说明启动成功
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.102:8080/
效果如下
安装和使用 TinyVue
安装 TinyVue
npm i @opentiny/vue@2
在 src/views/Home.vue 中使用 TinyVue 组件
<template>
<div class="home">
<!-- 3. 使用 TinyVue 组件 -->
<Button>OpenTiny</Button>
<Alert description="Hello OpenTiny"></Alert>
</div>
</template>
<script lang="ts">
// 1. 引入 TinyVue 组件
import { Button, Alert } from '@opentiny/vue'
@Component({
components: {
// 2. 注册 TinyVue 组件
Button, Alert
},
})
</script>
效果如下
在 Vue3 项目中使用
创建 Vue3 项目
使用 Vite 创建一个 Vue3 项目
npm create vite vue3-demo
输出以下信息说明项目创建成功
Done. Now run:
cd vue3-demo
npm install
npm run dev
创建好之后可以执行以下命令启动项目
npm i
npm run dev
输出以下命令说明启动成功
VITE v3.2.5 ready in 391 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
效果如下
安装和使用 TinyVue
安装 TinyVue
npm i @opentiny/vue@3
在 src/App.vue 中使用 TinyVue 组件
<script setup lang="ts">
// 1. 引入 TinyVue 组件
import { Button, Alert } from '@opentiny/vue'
</script>
<template>
<!-- 2. 使用 TinyVue 组件 -->
<Button>OpenTiny</Button>
<Alert description="Hello OpenTiny"></Alert>
</template>
效果如下
总结
可以看到在 Vue2 和 Vue3 项目中组件的使用方式完全一样,这也就意味着,使用 TinyVue 的 Vue2 项目可以无缝迁移到 Vue3 项目中。
- 无需修改 API
- 无需担心组件功能不一致
- 无需担心业务出现不连续
更多 TinyVue 组件,欢迎体验:https://opentiny.design/tiny-vue
联系我们
如果你对我们 OpenTiny 的开源项目感兴趣,欢迎添加小助手微信:opentiny-official,拉你进群,一起交流前端技术,一起玩开源。
OpenTiny 官网:https://opentiny.design/
OpenTiny 仓库:https://github.com/opentiny/
Vue 组件库:https://github.com/opentiny/tiny-vue(欢迎 Star )
Angular 组件库:https://github.com/opentiny/ng(欢迎 Star )
CLI 工具:https://github.com/opentiny/tiny-cli(欢迎 Star )
一个 OpenTiny,Vue2 Vue3 都支持!的更多相关文章
- vue-cli3 vue2 保留 webpack 支持 vite 成功实践
大家好! 文本是为了提升开发效率及体验实践诞生的. 项目背景: 脚手架:vue-cli3,具体为 "@vue/cli-service": "^3.4.1" 库: ...
- jquery技巧之让任何组件都支持类似DOM的事件管理
本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...
- polaris: 一个用go实现的支持restful的web框架
介绍 polaris是一个用go实现的支持restful的web框架,主要参考tornado进行设计. 虽然在go里面搭建一个http server非常的简单,这里强烈推荐gorilla,但并没有很好 ...
- (转)转一份在 51testing 上的讨论——如何测试一个门户网站是否可以支持10万用户同时在线?
转自:http://www.cnblogs.com/jackei/archive/2006/11/16/561846.html 这个帖子的内容比较典型,大家有兴趣可以也思考一下. 先是楼主提出问题: ...
- 光猫和路由器都支持ipv6,却无法使用ipv6?
这些年很多地方的光猫都能获得ipv6地址了,而且新出的路由基本都支持ipv6,但是还是有很多人在http://test-ipv6.com看不到自己的ipv6地址,也上不了ipv6网站. 我也遇到这个问 ...
- java nio 写一个完整的http服务器 支持文件上传 chunk传输 gzip 压缩 使用过程 和servlet差不多
java nio 写一个完整的http服务器 支持文件上传 chunk传输 gzip 压缩 也仿照着 netty处理了NIO的空轮询BUG 本项目并不复杂 代码不多 ...
- 一个国外网盘pCloud——支持离线下载
给大家分享一个国外网盘<支持离线下载> https://my.pcloud.com/#page=register&invite=HiegZ8aBrt7
- 用CSS实现Firefox 和IE 都支持的Alpha透明效果
有的时候,为了实现一些特殊效果,需要将页面元素变透明,本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果.CSS: filter:alpha(opacity=50 ...
- 瞧一瞧,看一看呐,用MVC+EF快速弄出一个CRUD,一行代码都不用写,真的一行代码都不用写!!!!
瞧一瞧,看一看呐用MVC+EF快速弄出一个CRUD,一行代码都不用写,真的一行代码都不用写!!!! 现在要写的呢就是,用MVC和EF弄出一个CRUD四个页面和一个列表页面的一个快速DEMO,当然是在不 ...
- UTF-8、GB2312都支持的汉字截取函数
<?php/*Utf-8.gb2312都支持的汉字截取函数cut_str(字符串, 截取长度, 开始长度, 编码);编码默认为 utf-8开始长度默认为 0*/ function cut_str ...
随机推荐
- 未知:长度为 K 的重复字符子串
给你一个由小写字母组成的长度为n的字符串 S ,找出所有长度为 k 且包含重复字符的子串,请你返回全部满足要求的子串的数目. 数据范围: , 进阶: 时间复杂度,空间复杂度 输入例子1: &qu ...
- JavaScript常见事件记录
JavaScript常见事件记录 onblur: 元素失去焦点 onfocus: 元素获得焦点 onchange: 用户改变域的内容 onclick: 鼠标点击某个对象 ondblclick: 鼠标双 ...
- json中有List集合时,转换List集合内元素的时间格式
1 public class User implements Serializable { 2 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss" ...
- IDEA中maven项目右侧maven图标不见了
右侧maven图标没有了 解决方法:双击shift(或者点击help-->Find Action) 打开搜索功能 ---> 搜素Maven Project--->选择Add Mave ...
- 实验3 C语言分支语句和循环语句编程应用
任务一 #include<math.h> #include<stdio.h> int main() { float a,b,c,x1,x2; float delta,real, ...
- python中创建列表、元组、字符串、字典
>>> a = ["aaa","bbb","ccc"] ## 列表,中括号,逗号 >>> type(a) ...
- NX1946_MoldWizard 注塑模向导建立标准库
NX1946_MoldWizard 注塑模向导建立标准库
- buuoj.cn-web刷题记录-笔记
1.万能密码 [极客大挑战 2019]EasySQL username=admin' or '1'='1&password=admin' or '1'='1 因为拼接为sql 会变成 sel ...
- Ubuntu 20.24 安装Postgresql 14
1.运行环境 WSL+Ubuntu 20.04 2.安装Postgresql 进入Linux命令行,参照Postgresql官网安装指南 # Create the file repositor ...
- spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...