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
- ⚡️ 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 – import tự động sử dụng Composition API,..
- 🦾 TypeScript, of course
- 🍍 State Management via Pinia, Vue Router
- ⚙️ Unit Testing với Vitest
Đây là cấu trúc thư mục của dự án sau khi 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 |
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ó):
1 2 | $ npm install pnpm |
hoặc
1 2 | $ yarn add pnpm |
Tiếp theo là cài đặt Vue bằng 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 |
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.
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
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.
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>Tạo 1 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>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.
123$ <span class="token function">pnpm</span> i ant-design-vue$ <span class="token function">pnpm</span> i -D unplugin-vue-componentsimport CSS vào file main.ts
12<span class="token keyword">import</span> <span class="token string">'ant-design-vue/dist/antd.css'</span>import AntDesignVueResolver vào 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
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.
123$ <span class="token function">pnpm</span> i -D unplugin-auto-import$ <span class="token function">pnpm</span> i @vueuse/coreimport AutoImport vào 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>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, pinia và vitest.
Nguồn