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
- ⚡️ 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 import – import automatically using Composition API,..
- 🦾 TypeScript , of course
- 🍍 State Management via Pinia , Vue Router
- ⚙️ Unit Testing with Vitest
This is the folder structure of the project after setup.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | vue-template/ ├── public/ | ├── favicon.ico ├── src/ | ├── assets/ | | └── logo.png | ├── components/ | | └── HelloWorld.vue | ├── core/ | ├── hooks/ | | └── useAuth.ts | ├── layouts/ | | └── BlankLayout.vue | | └── MainLayout.vue | ├── pages/ | | └── Dashboard.vue | | └── Error.vue | | └── NotFound.vue | ├── routes/ | | └── index.ts | ├── stores/ | | └── auth.ts | ├── test/ | | └── components/ | | | └── Sample.spec.ts | ├── App.vue | └── main.ts | └── vite-env.d.ts | └── vue-shim.d.ts ├── package.json ├── README.md ├── .cz-config.ts ├── .env.sample ├── .eslintrc ├── .prettierrc ├── .commitlint.config.cjs ├── tsconfig.json ├── tsconfig.node.json └── vite.config.js └── unocss.config.ts |
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):
1 2 | $ npm install pnpm |
or
1 2 | $ yarn add pnpm |
Followed by installing Vue using Vite :
1 2 | $ pnpm create vite vue <span class="token operator">-</span> template <span class="token operator">--</span> template vue <span class="token operator">-</span> ts |
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.
12$ <span class="token function">pnpm</span> <span class="token function">install</span> -D vite-tsconfig-pathstsconfig.json
123456789<span class="token punctuation">{</span><span class="token string">"baseUrl"</span> <span class="token operator">:</span> <span class="token string">"."</span> <span class="token punctuation">,</span><span class="token string">"paths"</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token string">"@/*"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"src/*"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token string">"@components/*"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"src/components/*"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token string">"@assets/*"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"src/assets/*"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">}</span>vite.config.js
123456789<span class="token keyword">import</span> tsconfigPathsPlugin <span class="token keyword">from</span> <span class="token string">'vite-tsconfig-paths'</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>plugins <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">tsconfigPathsPlugin</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token function">vue</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">}</span> <span class="token punctuation">)</span>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.
12$ pnpm install -D unocssvite.config.js
1234567891011<span class="token keyword">import</span> tsconfigPathsPlugin <span class="token keyword">from</span> <span class="token string">'vite-tsconfig-paths'</span><span class="token keyword">import</span> UnoCSS <span class="token keyword">from</span> <span class="token string">'unocss/vite'</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>plugins <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">tsconfigPathsPlugin</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token function">vue</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token function">UnoCSS</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">}</span> <span class="token punctuation">)</span>Create a file unocss.config.ts
12345678910111213141516171819202122232425262728293031<span class="token keyword">import</span> <span class="token punctuation">{</span>defineConfig <span class="token punctuation">,</span>presetAttributify <span class="token punctuation">,</span>presetIcons <span class="token punctuation">,</span>presetUno <span class="token punctuation">,</span>presetWebFonts <span class="token punctuation">,</span>transformerDirectives <span class="token punctuation">,</span>transformerVariantGroup <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'unocss'</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>presets <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">presetUno</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// Mặc định (@unocss/preset-wind).</span><span class="token function">presetAttributify</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// CSS trên DOM như 1 Attribute(@unocss/preset-attributify) </span><span class="token function">presetIcons</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>scale <span class="token operator">:</span> <span class="token number">1.2</span> <span class="token punctuation">,</span>warn <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// Sử dụng bất kỳ icon nào làm class or attribute.(@unocss/preset-icons)</span><span class="token function">presetWebFonts</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>fonts <span class="token operator">:</span> <span class="token punctuation">{</span>sans <span class="token operator">:</span> <span class="token string">'Roboto'</span> <span class="token punctuation">,</span>mono <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'Fira Code'</span> <span class="token punctuation">,</span> <span class="token string">'Fira Mono:400,700'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// sử dụng bất kì Font mà thư viện có sẵn hoặc có thể tự custome font (@unocss/preset-web-fonts)</span><span class="token punctuation">]</span> <span class="token punctuation">,</span>transformers <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">transformerDirectives</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// @apply, @screen and theme() directive (@unocss/transformer-directives)</span><span class="token function">transformerVariantGroup</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// nhóm CSS lại với nhau => hover:(bg-gray-400 font-medium) (@unocss/transformer-variant-group)</span><span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token punctuation">)</span>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.
123$ <span class="token function">pnpm</span> i ant-design-vue$ <span class="token function">pnpm</span> i -D unplugin-vue-componentsimport CSS into main.ts
12<span class="token keyword">import</span> <span class="token string">'ant-design-vue/dist/antd.css'</span>import AntDesignVueResolver into the file vite.config.js
1234567891011121314151617<span class="token keyword">import</span> Components <span class="token keyword">from</span> <span class="token string">'unplugin-vue-components/vite'</span><span class="token keyword">import</span> <span class="token punctuation">{</span> AntDesignVueResolver <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'unplugin-vue-components/resolvers'</span><span class="token keyword">import</span> tsconfigPathsPlugin <span class="token keyword">from</span> <span class="token string">'vite-tsconfig-paths'</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>plugins <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">tsconfigPathsPlugin</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token function">vue</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token function">Components</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>resolvers <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token function">AntDesignVueResolver</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>include <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token regex"><span class="token regex-delimiter">/</span> <span class="token regex-source language-regex">.vue$</span> <span class="token regex-delimiter">/</span></span> <span class="token punctuation">,</span> <span class="token regex"><span class="token regex-delimiter">/</span> <span class="token regex-source language-regex">.vue?vue</span> <span class="token regex-delimiter">/</span></span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>dts <span class="token operator">:</span> <span class="token string">'src/components.d.ts'</span> <span class="token punctuation">,</span> <span class="token comment">// plugins này sẽ tự động generated ra file components.d.ts trong source src.</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token operator">...</span> <span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token punctuation">)</span>Auto Import
In this section, I have used the @vueuse /core library, which supports me with the necessary hooks in the process.
123$ <span class="token function">pnpm</span> i -D unplugin-auto-import$ <span class="token function">pnpm</span> i @vueuse/coreimport AutoImport into the file vite.config.js
123456789101112131415161718192021222324<span class="token keyword">import</span> Components <span class="token keyword">from</span> <span class="token string">'unplugin-vue-components/vite'</span><span class="token keyword">import</span> <span class="token punctuation">{</span> AntDesignVueResolver <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'unplugin-vue-components/resolvers'</span><span class="token keyword">import</span> AutoImport <span class="token keyword">from</span> <span class="token string">'unplugin-auto-import/vite'</span><span class="token keyword">import</span> tsconfigPathsPlugin <span class="token keyword">from</span> <span class="token string">'vite-tsconfig-paths'</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>plugins <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">tsconfigPathsPlugin</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token function">vue</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token function">AutoImport</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>imports <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'vue'</span> <span class="token punctuation">,</span> <span class="token string">'@vueuse/core'</span> <span class="token punctuation">,</span> <span class="token string">'vue-router'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>dts <span class="token operator">:</span> <span class="token string">'src/auto-imports.d.ts'</span> <span class="token punctuation">,</span> <span class="token comment">// plugins này sẽ tự động generated ra file auto-imports.d.ts trong source src.</span>dirs <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token comment">// chỗ này mình có thể thêm name folder nó sẽ tự động lấy tất cả các tên file trong folder đó và mình có thể gọi bất kì ở trong file Vue nào mà không cần import. (src/stores)</span>vueTemplate <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token function">Components</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>resolvers <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token function">AntDesignVueResolver</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>include <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token regex"><span class="token regex-delimiter">/</span> <span class="token regex-source language-regex">.vue$</span> <span class="token regex-delimiter">/</span></span> <span class="token punctuation">,</span> <span class="token regex"><span class="token regex-delimiter">/</span> <span class="token regex-source language-regex">.vue?vue</span> <span class="token regex-delimiter">/</span></span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>dts <span class="token operator">:</span> <span class="token string">'src/components.d.ts'</span> <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span><span class="token operator">...</span> <span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token punctuation">)</span>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