TMUI 3.1.1
键入关键记事 K

Appearance

On this page
开发指南 tmui.design ​

快速上手 ​

💏 注意事项 ​

最佳VUE3.0 TS原生模板下载

真正的解放双手，严格使用tmui3.0设计标准生产的页面模板，质量高，简单易用。
前往观摹下载

特别提醒

tmui采用全局TypeScript。因此任何vue页面，都将只能使用ts模式编写页面。默认采用CLI安装方式。

如果没打算好采用TypeScript编写页面，请谨慎使用本ui框架。（如果不懂ts。就当把js改成ts后缀，当js写也可以，不会报错。）

为什么默认使用CLI方式？

编译方便，代码提示更强。而不用忍受HBX工具时常的崩溃或者卡。并且配合VSCODE工具非常的方便。

查看模拟效果＋

👉自动tmui-cli方式安装 ​

一键安装部署并编译运行，只要一条命令，没有其它繁琐的操作啦。
tmui-cli

👉手动方式安装 ​

下载TMUI3.0组件库

  1. 首先下载tmui3.0组件库 前往下载
  2. 解压得到tmui目录

👉手动CLI方式安装 ​

  1. 前往uniapp官方下载cli模板，建议下载我的cli模板，直接开始一个新的项目，基础配置已帮你配置好。 下载cli模板
  2. 解压后在当前目录 执行命令npm install ,时间可能稍长，待安装完毕。
  3. 将tmui目录复制到src目录下即可。
如何升级当前uniapp sdk？（推荐下载完cli后，手动升级下最新的版本号）

打开命令行工具，执行命令npm view @dcloudio/uni-app打印当前最新的版本号，找到vue3: 版本号在这是一串数字 复制 上述版本号 替换掉根目录中的package.json文件中的版本号。然后执行 npm install升级，安装即可。

你也可以在uniapp官方的npm版本库中找到最新的版本号@dcloudio/uni-app，切换至：Version后，第一个对应的VUE3那一栏3.0.0-alpha-304xxxxx这个就是版本号。

基本的CLI目录结构如下：

│  index.html
│  package-lock.json
│  package.json ---可替换掉里面的版本号，再执行npm install 即可升级
│  postcss.config.js
│  tsconfig.json
│  vite.config.ts
│
└─src
    │  App.vue
    │  env.d.ts
    │  main.ts
    │  manifest.json
    │  pages.json
    │  uni.scss
	  │  hybrid 目录，部分组件需要在nvue下兼容，一定要，具体内容请前往gitee上下载
    ├─pages
    ├─static
    │
    └─tmui --tmui插件目录

👉HBX方式安装 ​

  1. 因为hbx工具暂时还不能创建vue3 ts项目，因此如果要创建hbx项目，只要下载我的cli模板后
  2. 解压cli模板。复制出src目录，把src目录名称改下，改成你的项目名称，就是一个新的项目了 无需npm install，但必须安装百度图表npm install echarts --save。因为最新的hbx4.14是内置了模块，但并没有内置echarts图表模块。 需要你手动安装下图表库。
  3. 进入hbx，选择顶部菜单文件->导入->导入本地目录->选择刚才第2步的目录。
  4. 复制tmui目录到根目录即可。
  5. 正常的编译运行操作即可。 hbx项目，结构如下：
│─App.vue
│ env.d.ts
│ main.ts
│ manifest.json
│ pages.json
│ uni.scss
│ hybrid 目录，部分组件需要在nvue下兼容，一定要，具体内容请前往gitee上下载
├─pages
├─static
└─tmui --tmui插件目录

👉APP manifest.json配置 ​

因部分组件使用了原生的canvas，需要配置原生nvue。 请打开manifest.json在app-plus下添加如下：

json
...
{
    "app-plus" : {
        ...
        /* 模块配置 */
        "modules" : {
                /* 使用Canvas模块，需要添加下面这一行 */
            "Canvas" : "nvue canvas" 
        },
        ...
    }
    ....
}

👉配置main.ts文件 ​

💡提示

如果你的项目已经启用了Pinia，请确保将app.use(tmui)写在app.use(pinia)后面。 因为TMUI如果检测到已经启用Pinia，默认会复用实例，否则会创建一个新的Pinia实例。

如下配置即可,或者直接复制如下代码到你的main.ts

ts
import { createSSRApp } from "vue";
import * as Pinia from 'pinia';
import tmui from "./tmui"
import App from "./App.vue";
export function createApp() {
  const app = createSSRApp(App);
  app.use(tmui,{} as Tmui.tmuiConfig)
  return {
    app,
    Pinia,
  };
}

👉配置APP.vue引入样式 ​

vue
<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
  console.log("App Launch");
});
onShow(() => {
  console.log("App Show");
});
onHide(() => {
  console.log("App Hide");
});
</script>
<style >
	/* #ifdef APP-NVUE */
	@import './tmui/scss/nvue.css';
	/* #endif */
	/* #ifndef APP-NVUE */
	@import './tmui/scss/noNvue.css';
	/* #endif */
</style>

✅全局引入 ​

可以省去导入组件的麻烦。 找到pages.json如下配置：

json
{
	"easycom":{
	 	"autoscan": true,
	 	"custom":{
	 		"^tm-(.*)": "@/tmui/components/tm-$1/tm-$1.vue"
	 	}
	 },
	"pages": [
		...
}

✅按需引入 ​

本demo和示例，默认采用此方式。
新建一个nvue或者vue页面比如inex.nvue

vue
<template>
	<tm-app>
        <tm-button label="按钮"></tm-button>		
	</tm-app>
</template>

<script lang="ts" setup>
	import tmApp from "../../tmui/components/tm-app/tm-app.vue";
	import tmButton from "../../tmui/components/tm-button/tm-button.vue";
</script>

✔️编译运行项目 ​

编译运行一个cli项目非常方便。导航至项目根目录，执行命令即可。
比如我要编译预览H5页面npm run dev:h5即可。

cli编译运行到更多平台命令
json
"dev:app": "uni -p app",
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
"dev:mp-kuaishou": "uni -p mp-kuaishou",
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
"build:app": "uni build -p app",
"build:custom": "uni build -p",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-alipay": "uni build -p mp-alipay",
"build:mp-baidu": "uni build -p mp-baidu",
"build:mp-kuaishou": "uni build -p mp-kuaishou",
"build:mp-lark": "uni build -p mp-lark",
"build:mp-qq": "uni build -p mp-qq",
"build:mp-toutiao": "uni build -p mp-toutiao",
"build:mp-weixin": "uni build -p mp-weixin",
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union"

HBX运行项目，请在HBX工具菜单找到运行菜单，编译预览到你的目标平台即可。

⁉️我有疑问？ ​

  1. 建议或者BUG提交：提交建议和bug
  2. 加微信群:介绍页面查看微信群码