开发指南 tmui.design
快速上手
特别提醒
tmui采用全局TypeScript。因此任何vue页面，都将只能使用ts模式编写页面。默认采用CLI安装方式。
如果没打算好采用TypeScript编写页面，请谨慎使用本ui框架。（如果不懂ts。就当把js改成ts后缀，当js写也可以，不会报错。）
尊贵的TMUI4.0x(uniappx) VIP付费用户/赞助者
3.2采用4.0x原生渲染组件库的标准规范和组件属性,将能轻松的平移并开发出相同规范的小程序,uniapp版本页面 以兼容4.0x应用并嵌套webview的方案(类似各大厂app,比如银行,淘宝等原生app会嵌套相关webview页面).并具有统一风格细节,让混合开发更具一致性.
如果你以往赞助过我的费用超过499元者可联系我直接进入VIP用户,免费获得终身TMUI4.0x(uniappx)版本
为什么默认使用CLI方式？
编译方便，代码提示更强。而不用忍受HBX工具时常的崩溃或者卡。并且配合VSCODE工具非常的方便。
👉自动tmui-cli方式安装
一键安装部署并编译运行，只要一条命令，没有其它繁琐的操作啦。
tmui-cli
👉市场HBX安装
下载TMUI3.0组件库
- 首先下载tmui3.0组件库 前往下载
- 根据提示点击导入组件到你的项目即可.
👉CLI SDK升级
打开命令行工具，执行命令npm view @dcloudio/uni-app打印当前最新的版本号，找到vue3: 版本号在这是一串数字 复制 上述版本号 替换掉根目录中的package.json文件中的版本号。然后执行 npm install升级，安装即可。记得删除packe-lock.json文件。
基本的CLI目录结构如下：
│ index.html
│ package-lock.json
│ package.json ---可替换掉里面的版本号，再执行npm install 即可升级
│ postcss.config.js
│ tsconfig.json
│ vite.config.ts
│ components.d.ts -- 这是自动生成的vscode组件提示文件
└─src
│ App.vue
│ main.ts
│ manifest.json
│ pages.json
│ uni.scss
│ hybrid 目录，部分组件需要
├─pages
├─static
│
└─uni_modules
└─tm-ui -- tmui组件目录，如果是hbx可以右键升级或者到市场导入，都会在这里。👉HBX项目（非cli）
hbx项目，结构如下：
│─App.vue
│ env.d.ts
│ main.ts
│ manifest.json
│ pages.json
│ uni.scss
│ hybrid 目录，部分组件需要
├─pages
├─static
└─uni_modules
└─tm-ui -- tmui组件目录，如果是hbx可以右键升级或者到市场导入，都会在这里。👉配置main.ts文件
💡提示
如果你的项目已经启用了Pinia，请确保将app.use(tmui)写在app.use(pinia)后面。 因为TMUI如果检测到已经启用Pinia，默认会复用实例，否则会创建一个新的Pinia实例。
如下配置即可,或者直接复制如下代码到你的main.ts
import { createSSRApp } from "vue";
import * as Pinia from 'pinia';
import App from "./App.vue";
import tmUi from "./uni_modules/tm-ui";
export function createApp() {
const app = createSSRApp(App);
app.use(Pinia.createPinia());
app.use(tmUi);
return {
app,
Pinia
};
}👉配置APP.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 >
/* 图标必须 */
@import url(@/uni_modules/tm-ui/css/remixicon.min.css);
/* 自定预处理类，可选 */
@import url(@/uni_modules/tm-ui/css/tmui.css);
page {
background: #f5f5f5;
}
</style>✔️编译运行项目
编译运行一个cli项目非常方便。导航至项目根目录，执行命令即可。
比如我要编译预览H5页面npm run dev:h5即可。
cli编译运行到更多平台命令
"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工具菜单找到运行菜单，编译预览到你的目标平台即可。
⁉️我有疑问？
- 建议或者BUG提交：提交建议和bug
- 加微信群:介绍页面查看微信群码