NaivePlus

NaivePlus

一个基于 Vue3 和 NaiveUI 的组件库

开始使用

快速开发

坚实贯彻配置驱动视图的思想,落实万物皆可 option。

极简代码

坚决贯彻极简封装和最少代码原则,让枯燥的crud在几秒内即可完成。

最佳实践

提供最佳实践代码,让每一位开发者都能以正确的姿势来使用 carton ui。

一、快速入门

1. 安装 naive-ui

naive-plus 基于 naiveUIopen in new window 封装

npm i naive-ui -D

2. 安装 naive-plus

npm i naive-plus -D

3. 安装 unplugin

通过 unplugin-vue-componentsunplugin-auto-import 来实现按需引入和自动导入

npm install -D unplugin-vue-components unplugin-auto-import

4. 按需引入

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

import { NaivePlusResolver } from 'naive-plus/lib/resolver'

export default {
  plugins: [
    // ...
    AutoImport({
       imports: ['vue'],
    }),
    Components({
      resolvers: [
         // 添加按需引入
        NaiveUiResolver(),
        NaivePlusResolver(),
      ],
    }),
  ],
};

5. 使用

<np-button>按钮</np-button>