@goodlark/ez-element NPM

使用 Vue3.4 TS5 的前端组件库

EzElement 是一款自己学习使用的Vue3前端组件库，让搭建组件库不再神秘。

安装

pnpm i @goodlark/ez-element --save

注册组件

main.ts 全局注册全部组件

import '@goodlark/ez-element/dist/index.css';

import { createApp } from 'vue';
import App from './App.vue';
import EzElement from '@goodlark/ez-element';

const app = createApp(App);
app.use(EzElement);
app.mount('#app');

main.ts 全局注册单个组件

import '@goodlark/ez-element/dist/index.css';

import { createApp } from 'vue';
import App from './App.vue';
import EzButton from '@goodlark/ez-element';

const app = createApp(App);
app.use(EzButton);
app.mount('#app');

使用组件

组件一旦全局注册，直接在SFC中使用即可，详情请见文档

基础示例：

<ez-button>Test Button</ez-button>
<ez-button plain>Test Button</ez-button>
<ez-button type="danger" loading>Test Button</ez-button>

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.