低代码高性能原生UI框架

Appearance

本页导读

快速上手 ​

本节将介绍如何在项目中使用 UxFrame，请认真阅读本章节

请使用最新HBuilderX版本 4.62+

安装 ​

在插件市场购买源码/试用后，使用 HbuilderX 将UxFrame导入项目

初始化 ​

在 main.uts 安装插件 ​

ts
import App from './App.uvue'
import { createSSRApp } from 'vue'

// UxFrame
import { uxframe, UxFrameInstallOptions } from '@/uni_modules/ux-frame'

export function createApp() {
  const app = createSSRApp(App)

    // 安装UxFrame
    app.use(uxframe({
        conf: {
            // false 可关闭插件内部日志打印
            debugLog: true,
            // 默认字体大小
            fontSize: 16,
            // 更多...
        }
    } as UxFrameInstallOptions))
  
  return {
    app,
  }
}
import App from './App.uvue'
import { createSSRApp } from 'vue'

// UxFrame
import { uxframe, UxFrameInstallOptions } from '@/uni_modules/ux-frame'

export function createApp() {
  const app = createSSRApp(App)

    // 安装UxFrame
    app.use(uxframe({
        conf: {
            // false 可关闭插件内部日志打印
            debugLog: true,
            // 默认字体大小
            fontSize: 16,
            // 更多...
        }
    } as UxFrameInstallOptions))
  
  return {
    app,
  }
}

可选插件配置 ​

现已支持i18n、AutoCSS 2大扩展功能配置，注意这些配置是可选的

首先在项目根目录下创建 vite.config.ts 配置文件，内容如下： ​

ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

// 原子化css - 可选
import autocss from './uni_modules/ux-frame/libs/plugins/autocss/index.mjs';

export default defineConfig({
	plugins: [
		uni(),
		autocss({
			debug: false,
			autoUseSnippets: true,
			generateGlobalCss : false,
			configFile: './autocss/config.js',
			cssFile: 'autocss/index.css',
			cssSnippetsFile: 'autocss/snippets.css',
			exclude: ['uni_modules/*', 'node_modules/*']
		})
	]
});
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

// 原子化css - 可选
import autocss from './uni_modules/ux-frame/libs/plugins/autocss/index.mjs';

export default defineConfig({
	plugins: [
		uni(),
		autocss({
			debug: false,
			autoUseSnippets: true,
			generateGlobalCss : false,
			configFile: './autocss/config.js',
			cssFile: 'autocss/index.css',
			cssSnippetsFile: 'autocss/snippets.css',
			exclude: ['uni_modules/*', 'node_modules/*']
		})
	]
});

在 main.uts 安装插件 ​

如果要安装i18n插件，前提先在项目根目录下创建locales文件夹，然后在此文件夹下新增2国语言配置文件

  • locales/zh_CN.uts
  • locales/en_US.uts

配置文件默认需要导出空json，否则编译失败

ts
export default {
    
}
export default {
    
}

安装路由和国际化 ​

ts
import App from './App.uvue'
import { createSSRApp } from 'vue'

// uxframe
import { uxframe, UxFrameInstallOptions } from '@/uni_modules/ux-frame'

// 国际化
import zhCN from './locales/zh_CN'
import enUS from './locales/en_US'

export function createApp() {
  const app = createSSRApp(App)

    // 安装UxFrame
    app.use(uxframe({
        conf: {
            // false 可关闭插件内部日志打印
            debugLog: true,
            // 默认字体大小
            fontSize: 16,
            // 更多...
        },
        // 可选 i18n安装
        i18n: {
            locale: 'zh-CN',
            messages: {
                'zh-CN': zhCN,
                'en-US': enUS,
            }
        },
    } as UxFrameInstallOptions))
  
  return {
    app,
  }
}
import App from './App.uvue'
import { createSSRApp } from 'vue'

// uxframe
import { uxframe, UxFrameInstallOptions } from '@/uni_modules/ux-frame'

// 国际化
import zhCN from './locales/zh_CN'
import enUS from './locales/en_US'

export function createApp() {
  const app = createSSRApp(App)

    // 安装UxFrame
    app.use(uxframe({
        conf: {
            // false 可关闭插件内部日志打印
            debugLog: true,
            // 默认字体大小
            fontSize: 16,
            // 更多...
        },
        // 可选 i18n安装
        i18n: {
            locale: 'zh-CN',
            messages: {
                'zh-CN': zhCN,
                'en-US': enUS,
            }
        },
    } as UxFrameInstallOptions))
  
  return {
    app,
  }
}

使用 ​

UxFrame 符合uni-modules规范，因此导入后无需引入即可使用任意组件

TIP

输入 <ux- 可快速候选UxFrame系列组件