Vue Component Splitter

Công cụ tách các file Vue SFC (Single File Component) thành các file riêng biệt cho template, script và style.

Tính năng

• Tự động phân tích và tách file Vue thành các phần riêng biệt
• Phát hiện và xử lý <script setup> và <style scoped>
• Tạo file script (JS) với các export đúng cách
• Tự động import các biến cần thiết trong file Vue

Cài đặt

Cài đặt toàn cục

npm install -g vue-component-splitter

Sử dụng với npx

npx vue-component-splitter <input-file.vue> <output-dir>

Cách sử dụng

vue-splitter <input-file.vue> <output-dir>

Trong đó:

• <input-file.vue>: Đường dẫn đến file Vue component cần tách
• <output-dir>: Thư mục đầu ra cho các thành phần đã tách

Ví dụ:

vue-splitter src/components/Index.vue ./components

Cấu trúc đầu ra

Cho một file Index.vue, công cụ sẽ tạo:

components/
    Index.vue             # Template và import
    Indexspjs.js          # JavaScript (với export)
    Indexspscss.scss      # Style

Sử dụng trong code

Bạn cũng có thể sử dụng công cụ này như một module trong mã của bạn:

const vueSplitter = require('vue-component-splitter');

// Tự động thực hiện tách file
vueSplitter.splitVueFile('src/components/Index.vue', './components')
  .then(() => console.log('Done!'))
  .catch(err => console.error('Error:', err));

Yêu cầu

• Node.js 14.0.0 trở lên

Giấy phép

MIT