Setup Source Template for Vue 3

Tram Ho

Introduce

Hello everyone, recently I spent a lot of time learning how to setup a VueJS project. I finally created a Vue Boilerplate.

If anyone has learned about VueJs or is working with it, then surely you will have many ways to create your own project structure.

Here, I will guide you to setup a VueJs source with me…

Content

This is the folder structure of the project after setup.

Setting

In this section, I will guide you to setup:
⚡️ Vue 3, Vite, pnpm
📦 Components auto importing
🎨 UnoCSS – 1 library inspired by Windi CSS, Tailwind CSS and Twind. ( Pretty good)
😃 Use icons from any icon sets with classes
📥 APIs auto importing

Step 1 – Install Vue 3, Vite, pnpm

First you Install PNPM (if not already):

or

Followed by installing Vue using Vite :

Screenshot 2023-02-02 at 13.28.36.png

Step 2 – Adding VueJS Support Libraries

  • Alias ​​Path

    alias path is an option that allows creating a mnemonic name for a path to a library or module. This makes using and accessing modules easier and more concise, reducing the amount of duplicate code.

    tsconfig.json

    vite.config.js

  • UnoCSS

    Is a CSS library inspired by Windi CSS , Tailwind CSS , and Twind . It is designed to reduce complexity and increase the manageability of the CSS code for a website or a website.

    vite.config.js

    Create a file unocss.config.ts

    If you want to use the Icon of the available library, then go here to choose an Icon font that you want to use (you can still choose all Icon fonts but I recommend choosing 1 font because it will be heavy on your source) .

    If you don’t use it, delete the presetIcons in the file unocss.config.ts

  • Antdv

    ant-design-vue provides a variety of user interface components to enrich your web applications, improving your experience consistently.

    import CSS into main.ts

    import AntDesignVueResolver into the file vite.config.js

  • Auto Import

    In this section, I have used the @vueuse /core library, which supports me with the necessary hooks in the process.

    import AutoImport into the file vite.config.js

    End

    In this section we have learned together about Vite and how to set it up. In the next part we will learn about vue-router , pinia and vitest .

    The source

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

Share the news now

Source : Viblo