项目简介 ​

简介 ​

Tenon (/ˈtenən/)正如其中文含义一样“榫”，用于链接 Native 生态和 Web 生态。 整个 Tenon 是基于 Hummer 的 MVVM 增强框架，向上通过接入 Vue、React ，去对接 Web 生态，向下通过 Hummer，去对接整个 Native 生态。

在这里你可以使用最新的Vue3``React语法特性，搭配我们特殊定制的标签、丰富的插件体系和逐渐完善的组件库，使用前端常用的CSS样式，完成自己业务工程的搭建。

Tips: Tenon React 在逐渐完善中，欢迎尝鲜。

Tenon Vue 起步 ​

您可以通过该教程，完成 Tenon Hello World 工程的创建。

安装 ​

1. 全局安装 Hummer CLI，请参见 Hummer CLI 使用。
2. 执行 hummer init选择 template-vue模板工程进行创建即可。
3. 切到工程中，执行 npm install，安装对应依赖。
4. 项目中执行 npm run dev 或者 hummer dev开启 Dev 模式。
5. 在浏览器预览页中，使用 Playground 进行扫码即可预览。

起步 ​

整个 tenon-vue 与 vue 整体语法原则上是兼容的，其它由于一定框架兼容问题，其入口函数以及组件有所不同。

入口函数 ​

Tenon Vue 中入口函数实现：

import Tenon from '@hummer/tenon-vue';
import App from './app.vue';
Tenon.render(App);

Vue 中入口函数实现：

import {createApp} from 'vue';
import App from './app.vue';
createApp(App).$mount("#app");

组件 ​

组件 Template 使用时，需要使用内置的标签，例如<view>、<text>、<image>等，具体可以参考文档组件篇。

针对 Web项目快速迁移改造 Tenon Vue 项目，我们的相关工具体系正在建设，之后会提供一整套迁移方案。

更多细节可参考Tenon Vue 快速上手

Tenon React 起步 ​

您可以通过该教程，完成 Tenon Hello World 工程的创建。

安装 ​

1. 全局安装 Hummer CLI，请参见 Hummer CLI 使用。
2. 执行 hummer init选择 template-react模板工程进行创建即可。
3. 切到工程中，执行 npm install，安装对应依赖。
4. 项目中执行 npm run dev 或者 hummer dev开启 Dev 模式。
5. 在浏览器预览页中，使用 Playground 进行扫码即可预览。

起步 ​

Tenon React 与 React 整体语法原则上是兼容的，其它由于一定框架兼容问题，其入口函数以及组件有所不同。

入口函数 ​

Tenon React

import Tenon from '@hummer/tenon-react';
import app from './app';

Tenon.render(app);

React

// React
import ReactDOM from 'react-dom'
import App from "./App.jsx"

ReactDOM.render(<App/>, document.getElementById("app"))

组件 ​

组件使用时，需要使用内置的标签，例如<view>、<text>、<image>等，具体可以参考文档组件篇。

更多细节可参考Tenon React 快速上手。