@antsoo-lib/antsoo-nova-ui v0.0.18

俺搜 Nova UI 组件库 (Vue2 版本)

一个轻量级的基于 Vue2 的 UI 组件库。

安装

npm install @antsoo-lib/antsoo-nova-ui --save

使用方法

完整引入

import Vue from "vue";
import NovaUI from "@antsoo-lib/antsoo-nova-ui";

// 使用默认前缀'Nova'注册所有组件（如NovaButton）
Vue.use(NovaUI);

// 如果需要自定义前缀，可以传入选项
Vue.use(NovaUI, { prefix: "Ant" }); // 组件将以 AntButton 的形式注册

按需引入

import Vue from "vue";
import { Button } from "@antsoo-lib/antsoo-nova-ui";

// 方法1: 使用组件自带的install方法注册（推荐）
Vue.use(Button);

// 方法2: 手动注册组件
Vue.component("NovaButton", Button);

通过 CDN 使用

<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 引入NovaUI组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@antsoo-lib/antsoo-nova-ui/dist/nova-ui.umd.js"></script>

<script>
	// 注册组件库
	Vue.use(NovaUI);

	new Vue({
		el: "#app"
	});
</script>

常见问题

使用全局引入方式但组件未注册

如果你在使用 Vue.use(NovaUI) 后仍然收到 "Unknown custom element" 警告，请尝试以下解决方案：

1. 检查导入方式：

// 确认导入的是默认导出
import NovaUI from "@antsoo-lib/antsoo-nova-ui";
Vue.use(NovaUI);

// 如果仍有问题，尝试：
import * as NovaUIModule from "@antsoo-lib/antsoo-nova-ui";
Vue.use(NovaUIModule.default);

2. 确保 Vue 实例唯一：请确保项目中只有一个 Vue 实例，不要在不同文件中重复引入 Vue。

3. 检查组件名称：默认情况下，组件会以 NovaButton 和 nova-button 两种名称注册，请确保模板中使用的是正确的名称。

4. 添加兼容模式：如果上述方法都无效，你可以尝试在 Vue 实例创建后手动注册组件：

import NovaUI from "@antsoo-lib/antsoo-nova-ui";
import { Button } from "@antsoo-lib/antsoo-nova-ui";

Vue.use(NovaUI);
// 额外手动注册一次
Vue.component("NovaButton", Button);
Vue.component("nova-button", Button);

组件列表

Button 按钮

基础的按钮组件。

基本用法

<template>
	<div>
		<NovaButton>默认按钮</NovaButton>
		<NovaButton type="primary">主要按钮</NovaButton>
		<NovaButton size="small">小按钮</NovaButton>
		<NovaButton size="large">大按钮</NovaButton>
		<NovaButton disabled>禁用按钮</NovaButton>
	</div>
</template>

如果你自定义了前缀，则使用对应的前缀名称：

<template>
	<div>
		<AntButton>默认按钮</AntButton>
		<AntButton type="primary">主要按钮</AntButton>
	</div>
</template>

属性

事件