低代码高性能原生UI框架

Appearance

本页导读

快速上手 ​

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

请使用最新HBuilderX版本 4.26+

安装 ​

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

初始化 ​

在 main.uts 安装插件 ​

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

import { install } from '@/uni_modules/ux-frame'

export function createApp() {
  const app = createSSRApp(App)
  
  // 安装UxFrame false 可关闭插件内部日志打印
  app.config.globalProperties.$ux = install(true)
  
  return {
    app,
  }
}
import App from './App.uvue'
import { createSSRApp } from 'vue'

import { install } from '@/uni_modules/ux-frame'

export function createApp() {
  const app = createSSRApp(App)
  
  // 安装UxFrame false 可关闭插件内部日志打印
  app.config.globalProperties.$ux = install(true)
  
  return {
    app,
  }
}

可选插件配置 ​

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

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

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

// 路由 - 可选
import router from './uni_modules/ux-frame/libs/plugins/router/index.mjs';

// 原子化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/*']
		}),
		router({
			pagesJsonMappingFile: 'uni_modules/ux-frame/libs/types/pages.uts',
			routerFile: 'router/router.uts'
		})
	]
});
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

// 路由 - 可选
import router from './uni_modules/ux-frame/libs/plugins/router/index.mjs';

// 原子化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/*']
		}),
		router({
			pagesJsonMappingFile: 'uni_modules/ux-frame/libs/types/pages.uts',
			routerFile: 'router/router.uts'
		})
	]
});

在 main.uts 安装插件 ​

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

  • locales/zh_CN.uts
  • locales/en_US.uts
  • locales/ja_JP.uts
  • locales/ko_KR.uts'
ts
import App from './App.uvue'
import { createSSRApp } from 'vue'

// uxframe
import { install, router, i18n } from '@/uni_modules/ux-frame'

// 路由
import routes from './router/router.uts';

// 国际化
import zhCN from './locales/zh_CN.uts'
import enUS from './locales/en_US.uts'
import jaJP from './locales/ja_JP.uts'
import koKR from './locales/ko_KR.uts'

export function createApp() {
  const app = createSSRApp(App)
  
  // 安装UxFrame false 可关闭插件内部日志打印
  app.config.globalProperties.$ux = install(true)
  
  // 安装路由库
  app.config.globalProperties.$router = router(routes)
  
  // 安装i18n
  app.use(i18n({
  	locale: 'zh-CN',
  	messages: {
  		'zh-CN': zhCN,
  		'en-US': enUS,
  		'ja-JP': jaJP,
  		'ko-KR': koKR
  	}
  }))
  
  return {
    app,
  }
}
import App from './App.uvue'
import { createSSRApp } from 'vue'

// uxframe
import { install, router, i18n } from '@/uni_modules/ux-frame'

// 路由
import routes from './router/router.uts';

// 国际化
import zhCN from './locales/zh_CN.uts'
import enUS from './locales/en_US.uts'
import jaJP from './locales/ja_JP.uts'
import koKR from './locales/ko_KR.uts'

export function createApp() {
  const app = createSSRApp(App)
  
  // 安装UxFrame false 可关闭插件内部日志打印
  app.config.globalProperties.$ux = install(true)
  
  // 安装路由库
  app.config.globalProperties.$router = router(routes)
  
  // 安装i18n
  app.use(i18n({
  	locale: 'zh-CN',
  	messages: {
  		'zh-CN': zhCN,
  		'en-US': enUS,
  		'ja-JP': jaJP,
  		'ko-KR': koKR
  	}
  }))
  
  return {
    app,
  }
}

使用 ​

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

TIP

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