什么是OnebayUI？
OnebayUI是使用vue3编写的移动Web UI库，它可以帮助您快速轻松地编写vue3应用程序。
所有组件均使用tsx编写。
文档中的所有组件demo均由vue模板和tsx编写。
Onebay大部分组件样式沿用了小程序UI库taro-ui样式
❝项目第一次提交是在2020-08-28，当时"vue"是"^3.0.0-rc.1"，当时比较少是vue3的Ui库，所以就有了一边学习一边做一个开源Ui库的想法。
❞
Button 示例
Switch 示例
更多示例可以查看Onebay文档
特性
- 支持按需加载
- 支持自定义主题
安装
npm i onebay-ui -S
or
yarn add onebay-ui
使用
import { defineComponent } from 'vue'
import { Button } from 'onebay-ui'
export default defineComponent({
setup() {
return () => {
return (
<Button>Submit</Button>
)
}
}
})
导入组件样式
仅导入使用的组件的样式（推荐）
import { Button } from 'onebay-ui'
import 'onebay-ui/dist/style/button.css'
与vite一起使用
如果您的应用是由vite创建的，则强烈建议您在项目中使用vite插件vite-plugin-imp，该插件可以自动导入组件 样式供您选择。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
plugins: [
vue(),
vitePluginImp({
libList: [
{
libName: 'onebay-ui',
style(name) {
return `onebay-ui/dist/style/${name}.css`
}
}
]
})
]
})
查看示例 codesandbox
与vue-cli一起使用
如果您的应用是由vue-cli创建的，则可以使用babel-plugin-import，如下所示：
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{
libraryName: "onebay-ui",
libraryDirectory: "es",
style: name => {
return `${name.replace("/es/", "/dist/style/")}.css`;
}
}
]
]
};
导入所有组件样式（不推荐）
import 'onebay-ui/dist/style/index.css'
自定义主题
您需要在项目中注入scss变量。
与vite一起使用
// vite.vonfig.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
jsxInject: "import { h } from 'vue';"
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
$color-brand: #ffc701;
$color-brand-light: #ffd541;
$color-brand-dark: #cc9f01;
`
}
}
},
plugins: [
vue(),
vitePluginImp({
libList: [
{
libName: 'onebay-ui',
style(name) {
return `onebay-ui/src/style/components/${name}.scss`
}
}
]
})
]
})
查看源码 onebay-ui-custom-theme-with-vite
与vue-cli一起使用
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `
$color-brand: #ffc701;
$color-brand-light: #ffd541;
$color-brand-dark: #cc9f01;
`
}
}
}
}
