Setup Source Template cho Vue 3

Tram Ho

Giới thiệu

Chào tất cả các bạn, gần đây mình giành khá nhiều thời gian tìm hiểu setup một Project về VueJS. Sau cùng, mình cũng đã khởi tạo được một Vue Boilerplate.

Nếu ai đã tìm hiểu qua về VueJs hoặc đang làm việc với nó thì chắc chắn rằng các bạn sẽ có nhiều cách để khởi tạo một structure dự án cho riêng mình.

Sau đây mình sẽ hướng dẫn các bạn setup một source VueJs cùng mình nha…

Nội Dung

Đây là cấu trúc thư mục của dự án sau khi setup.

Cài đặt

Trong phần này mình sẽ hướng dẫn các bạn setup về:
⚡️ Vue 3, Vite, pnpm
📦 Components auto importing
🎨 UnoCSS – 1 thư viện lấy ý tưởng từ Windi CSS, Tailwind CSS và Twind. ( Khá hay)
😃 Use icons from any icon sets with classes
📥 APIs auto importing

Bước 1 – Cài đặt Vue 3, Vite, pnpm

Đầu tiên bạn Install PNPM (nếu chưa có):

hoặc

Tiếp theo là cài đặt Vue bằng Vite:

Screenshot 2023-02-02 at 13.28.36.png

Bước 2 – Thêm các thư viện hỗ trợ VueJS

  • Alias Path

    alias path (đường dẫn bí danh) là một tùy chọn cho phép tạo một tên gợi nhớ cho một đường dẫn đến một thư viện hoặc module. Điều này giúp cho việc sử dụng và truy cập các module trở nên dễ dàng hơn và ngắn gọn hơn, giúp giảm số lượng mã trùng lặp.

    tsconfig.json

    vite.config.js

  • UnoCSS

    Là một thư viện CSS lấy nguồn cảm hứng từ Windi CSS, Tailwind CSS, and Twind. Nó được thiết kế để giảm thiểu sự phức tạp và tăng tính dễ quản lý của mã CSS cho một trang web hoặc một website.

    vite.config.js

    Tạo 1 file unocss.config.ts

    Nếu bạn muốn sử dụng Icon của thư viện có sẵn thì bạn hãy vào đây chọn 1 font Icon mà bạn muốn dùng (vẫn có thể chọn tất cả các font Icon nhưng mình khuyến Khích nên chọn 1 font vì nó sẽ nặng source của bạn).

    Nếu bạn không dùng thì bạn hãy xoá presetIcons trong file unocss.config.ts

  • Antdv

    ant-design-vue cung cấp nhiều component giao diện cho người dùng để làm phong phú các ứng dụng web, cải thiện trải nghiệm một cách nhất quán của bạn.

    import CSS vào file main.ts

    import AntDesignVueResolver vào file vite.config.js

  • Auto Import

    Trong phần này thì mình có dùng thêm thư viện @vueuse/core, nó hỗ trợ mình những hook cần thiết trong quá trìnhb làm việc.

    import AutoImport vào file vite.config.js

    Kết bài

    Ở phần này chúng ta đã cùng nhau tìm hiểu về Vite và cách setup của nó. Ở phần tiếp theo chúng ta sẽ cùng nhau tìm hiểu về vue-router, piniavitest.

    Nguồn

    https://github.com/trungpham71198/vue-template

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo