Hướng dẫn tạo thư viện Vue 3 với TypeScript

Giới thiệu

Trong bài viết này, chúng ta sẽ cùng nhau khám phá cách tạo một thư viện đơn giản từ Vue 3 sử dụng TypeScript. Mục tiêu là xây dựng một thư viện có thể tái sử dụng cho các thành phần Vue, giúp tiết kiệm thời gian và công sức khi phát triển các dự án khác nhau. Chúng ta sẽ bắt đầu từ việc khởi tạo dự án cho đến việc xuất bản thư viện lên NPM.

Bắt đầu với dự án Vue 3 + TypeScript

Bước đầu tiên là tạo một dự án mới sử dụng Vue 3 và TypeScript. Bạn có thể sử dụng Vite để khởi tạo dự án một cách nhanh chóng. Dưới đây là hướng dẫn từng bước:

1. Khởi tạo dự án

   bash Copy

   npm create vite

   Chọn tên dự án và các tùy chọn như sau:

   Copy

   > Project name: v-jp-button
   > Select a framework: Vue
   > Select a variant: Official Vue Starter

2. Cài đặt các gói cần thiết

   bash Copy

   cd v-jp-button
   npm install
   npm run format
   npm run dev

Tạo một thành phần Button

Bây giờ chúng ta sẽ tạo một thành phần button đơn giản nhưng có thể sử dụng được. Đầu tiên, tạo file ButtonComponent.vue trong thư mục src/components với nội dung như sau:

<template>
  <button class="button" :class="color" @click="handleClick()">{{ text }}</button>
</template>

<script setup lang="ts">

type ButtonColor = 'button-primary' | 'button-secondary' | 'button-success' | 'button-danger' | 'button-warning' | 'button-info';

interface Props {
  text: string;
  color?: ButtonColor;
}

withDefaults(defineProps<Props>(), {
  color: 'button-primary',
});

const emit = defineEmits(['clickBtn']);

const handleClick = () => emit('clickBtn');
</script>

<style scoped>
.button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: #000;
  background-color: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.button:hover {
  background-color: transparent;
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15);
}
</style>

Sử dụng thành phần Button

Để sử dụng thành phần này, chúng ta sẽ cập nhật file App.vue như sau:

<template>
  <ButtonComponent @clickBtn="handleClick" color="button-warning" text="Hãy Click Tôi" />
</template>

<script setup lang="ts">
import ButtonComponent from './components/ButtonComponent.vue';

const handleClick = () => {
  console.log('Đã click vào button!');
};
</script>

Cấu hình xuất bản thư viện

Sau khi tạo thành phần, chúng ta cần cấu hình để xuất bản thư viện. Các bước như sau:

1. Tạo thư mục thư viện

Tạo một thư mục tên là lib trong src và thêm file index.ts:

export { default as Button } from '../components/ButtonComponent.vue';

2. Cài đặt gói cần thiết

Cài đặt gói vite-plugin-dts để tạo file .d.ts cho thư viện:

npm install -D vite-plugin-dts

3. Cấu hình vite.config.ts

Cập nhật file vite.config.ts như sau:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import dts from 'vite-plugin-dts';
import path from 'path';

export default defineConfig({
  plugins: [vue(), dts()],
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/lib/index.ts'),
      name: 'VJPButton',
      fileName: (format) => `v-jp-button.${format}.js`,
    },
  },
});

4. Cấu hình tsconfig.app.json

Cập nhật file tsconfig.app.json:

{
  "compilerOptions": {
    "declaration": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["src/**/__tests__/*"]
}

5. Cấu hình package.json

Cập nhật file package.json:

{
  "name": "v-jp-button",
  "version": "0.0.1",
  "description": "Thư viện nút Vue tùy biến với trạng thái tải và hỗ trợ biểu tượng.",
  "main": "dist/v-jp-button.umd.js",
  "module": "dist/v-jp-button.es.js"
}

6. Biên dịch thư viện

Chạy lệnh sau để biên dịch thư viện:

npm run build

Xuất bản thư viện lên NPM

Sau khi biên dịch thành công, bạn có thể xuất bản thư viện lên NPM:

1. Đăng nhập vào NPM:
   bash Copy

   npm login

2. Cập nhật phiên bản trong package.json:
   bash Copy

   npm version patch

3. Xuất bản thư viện:
   bash Copy

   npm publish

Kết luận

Chúc mừng bạn đã hoàn thành việc tạo và xuất bản thư viện Vue 3 với TypeScript! Bây giờ bạn có thể cài đặt thư viện của mình trong các dự án khác bằng cách sử dụng:

npm install v-jp-button

Hãy thử nghiệm và mở rộng thư viện của bạn với nhiều thành phần hơn nhé! Đừng quên theo dõi GitHub của dự án để xem thêm chi tiết.

Câu hỏi thường gặp (FAQ)

1. Làm thế nào để thêm nhiều thành phần hơn vào thư viện?

Bạn chỉ cần tạo thêm các file .vue trong thư mục components và cập nhật index.ts trong thư mục lib để xuất chúng.

2. Có cần phải cài đặt thêm gói nào không khi sử dụng thư viện này?

Không, tất cả các thành phần đã được đóng gói sẵn và có thể sử dụng ngay.

3. Làm sao để thay đổi kiểu dáng của nút?

Bạn có thể tùy chỉnh kiểu dáng thông qua CSS trong file ButtonComponent.vue.