kylin naiveui pro

See our website k-naiveui-pro for more information.

English | 简体中文

Do not use in a production environment at this time during the testing phase

Install

pnpm add naive-ui k-naiveui-pro unocss @vueuse/core @iconify/vue

Use

global

一. Register components in main.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')

二. Add UnoCSS plugin in vite.config.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))
    }
  }
})

三. Create a uno.config.ts file under the project root, with the following configuration:

import {defineConfig, presetUno} from 'unocss'

export default defineConfig({
    presets: [presetUno()],
})

Import on Demand

pnpm add k-naiveui-pro-resolver unplugin-vue-components

• Add the NaiveUiResolver KNaiveUiProResolver plug-in in the vite.config.ts file and configure it

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))
    }
  }
})

List of things to do

• Add a ProLayout
• Add a ProBaseForm
• Add a ProQueryForm
• Add a ProStepsForm
• Add a ProCrud
• Add a ProBreadcrumb
• Add a ProBackground
• Add a ProTabs
• Add a ProCheckbox
• Add a ProRadio
• Add a ProColumnSetting
• Add a ProDescriptions
• Add a ProToggleFullScreen
• Add a ProToggleLanguage
• Add a ProToggleTheme
• Add a ProCheckCard
• Add a ProAvatar

License

MIT

Copyright (c) 2024-present, kylin