TMUI3.2Vue版

uniappx混合开发使用

详见混合开发指南;

内置了tmuijssdk.js插件可轻松调用uniappx中的方法。

vue项目中使用

仅作为你web vue 移动端使用。

一、复制tmui3.2 vue组件

从demo代码仓库中下载好tm-ui vue组件包。复制到你的项目目录根目录/src/components/tm-ui位置即可。

二、引用

在你的src/main.ts中如下配置

import { createApp } from 'vue'
// @ts-ignore
import './style.css'
import App from './App.vue'
//必须安装
import { createPinia } from 'pinia'
//必须安装
import router from './router'
// 引入组件包
import tmui from './components/tm-ui'

const app = createApp(App)
app.use(createPinia())
app.use(router)
// 最后引用安装好。
app.use(tmui)
app.mount('#app')

三、配置tsconfig

为了有类型提示，你还需要配置tsconfig来获得类型提示

{
 ...
  "compilerOptions": {
	...
    // 包含类型定义文件
    "typeRoots": ["./components/tm-ui"],
	...
  },
  "include": [
    "components/tm-ui/*.ts",
    "components/tm-ui/**/*.ts",
  ]
}

四、配置vite.config.ts

为了让组件内可以使用view,rpx,uni.方法标签你需要配置我开发的vite插件以此来适配。tmui3.2

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入tmui中的插件
import tmuiVitePlugin from './src/components/tm-ui/vitePlugin'

// https://vite.dev/config/
export default defineConfig({
  server:{
    port:3000,
  },
  plugins: [
	vue(), 
	// 配置插件,兼容rpx，view标签或者单位。
	muiVitePlugin()
  ],
  resolve: {
    alias: {
      // 配置 Vue 别名为包含模板编译器的版本，主要是兼容编译tmui3.2
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }
})

自带的全局方法

可以在引用组件库后可全局使用

uni.方法使用有关方法，只是部分映射了，注意里面有两个方法是特殊的。