https://github.com/infernalazazel/k-naiveui-pro
Professional level components developed based on Naiveui. ProComponents in Vue
https://github.com/infernalazazel/k-naiveui-pro
k-naiveui-pro naive-ui procomponents unocss vue vue3
Last synced: 11 months ago
JSON representation
Professional level components developed based on Naiveui. ProComponents in Vue
- Host: GitHub
- URL: https://github.com/infernalazazel/k-naiveui-pro
- Owner: InfernalAzazel
- License: mit
- Created: 2024-09-26T07:45:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-26T08:24:04.000Z (over 1 year ago)
- Last Synced: 2025-04-01T12:18:02.073Z (about 1 year ago)
- Topics: k-naiveui-pro, naive-ui, procomponents, unocss, vue, vue3
- Language: Vue
- Homepage: https://infernalazazel.github.io/k-naiveui-pro/
- Size: 12.7 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh_CN.md
- License: LICENSE
Awesome Lists containing this project
README
# kylin naiveui pro
查看我们的网站 [k-naiveui-pro](https://infernalazazel.github.io/k-naiveui-pro/) 了解更多信息.
简体中文 | [English](./README.md)
> 目前在测试阶段请勿用于生产环境
## 安装
```bash
pnpm add naive-ui k-naiveui-pro unocss @vueuse/core @iconify/vue
```
## 使用
### 全局
一. 在 `main.ts` 中注册组件
```ts
import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'
import KNaiveUiPro from 'k-naiveui-pro'
const app =createApp(App)
app.use(naive)
app.use(KNaiveUiPro)
app.mount('#app')
```
二. 在 `vite.config.ts` 添加 UnoCSS 插件
```ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
UnoCSS()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
```
三. 在项目根下创建一个 `uno.config.ts` 文件, 配置如下:
```ts
import {defineConfig, presetUno} from 'unocss'
export default defineConfig({
presets: [presetUno()],
})
```
## 按需引入
```bash
pnpm add k-naiveui-pro-resolver unplugin-vue-components
```
- 在 `vite.config.ts` 文件添加 NaiveUiResolver KNaiveUiProResolver 插件并配置
```ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import { KNaiveUiProResolver } from 'k-naiveui-pro-resolver'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
UnoCSS(),
Components({
resolvers: [
NaiveUiResolver(),
KNaiveUiProResolver()
]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
```
## 办事列表
- [X] 添加 ProLayout
- [X] 添加 ProBaseForm
- [X] 添加 ProQueryForm
- [X] 添加 ProStepsForm
- [ ] 添加 ProCrud
- [X] 添加 ProBreadcrumb
- [X] 添加 ProBackground
- [X] 添加 ProTabs
- [X] 添加 ProCheckbox
- [X] 添加 ProRadio
- [X] 添加 ProColumnSetting
- [X] 添加 ProDescriptions
- [X] 添加 ProToggleFullScreen
- [X] 添加 ProToggleLanguage
- [X] 添加 ProToggleTheme
- [X] 添加 ProCheckCard
- [X] 添加 ProAvatar
## License
MIT
Copyright (c) 2024-present, kylin