Chào mừng đến với Cafedev – nơi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong bài viết hôm nay, chúng ta sẽ cùng tìm hiểu cách thiết lập VueJS 3 với Vite, UnoCSS và ESLint/Prettier. Cùng Cafedev khám phá những bước cấu hình chi tiết để tối ưu hóa dự án frontend của bạn và tạo ra các ứng dụng hiệu quả và dễ bảo trì. Hãy cùng bắt đầu hành trình của chúng ta và khám phá những điều thú vị trong bài viết dưới đây!
Đây là phiên bản cập nhật của bài viết này . Bài viết khác đã có 2 năm và từ đó tôi đã sử dụng một số công cụ khác. Vì vậy bây giờ tôi đang sử dụng pnpm thay vì yarn , và unocss thay vì tailwindcss.
Hãy bắt đầu bằng cách mở một terminal và gõ:
pnpm create vite todosNó sẽ hỏi bạn có muốn sử dụng một framework JavaScript không. Hãy chọn Vue. Nó cũng sẽ hỏi bạn có muốn sử dụng TypeScript hay JavaScript. Tôi đề xuất chọn TypeScript thay vì JavaScript và từ từ thêm vào một số TypeScript vào mã của bạn.
Bây giờ hãy di chuyển vào thư mục, cài đặt các phụ thuộc và khởi động nó.
cd todos
pnpm i
pnpm devĐiều này sẽ bắt đầu máy chủ vite trên cổng 5173 mặc định, vì vậy nếu bạn mở nó trong trình duyệt bạn sẽ thấy một cái gì đó như thế này:
Như tôi đã đề cập ở đầu bài viết, tôi đã bắt đầu sử dụng UnoCSS thay vì TailwindCSS sau khi đọc bài viết này của Anthony Fu.
Để có được nó hoạt động, tôi cài đặt các gói sau trong dự án todos (nếu nó vẫn đang chạy chỉ cần nhấn Command + C trên mac hoặc Ctrl + C trên windows/linux):
pnpm add -D @iconify/json @julr/unocss-preset-forms \
@unocss/preset-icons @unocss/preset-typography \
@unocss/preset-uno @unocss/transformer-directives unocssHãy đi qua những gì chúng ta đang làm với hướng dẫn này. Trước tiên, chúng ta đang thêm những phụ thuộc này vào các phụ thuộc phát triển (những phụ thuộc được sử dụng để tạo ra bản dựng của bạn, nhưng sẽ không là phần của bản dựng của bạn). Tôi đang thêm iconofy để cho phép dự án của chúng ta sử dụng bất kỳ gói biểu tượng nào trong nhóm này . Sau đó, tôi thêm một bộ presets mở rộng cách tôi sử dụng UnoCSS. Tôi sẽ chỉ cho bạn sau các bước cần thiết để thiết lập chúng bên trong UnoCSS. Sau presets, tôi thêm các chỉ thị biến đổi, cho phép chúng ta làm điều gì đó như @apply bg-red-100 trong một lớp css. Và cuối cùng, tôi đang thêm phụ thuộc unocss.
Chúng ta cần thêm một phụ thuộc khác để giúp chúng ta với cách các trình duyệt khác nhau hiển thị trang của chúng ta. Phụ thuộc này sẽ là một phần của bản dựng của chúng ta, vì vậy chúng ta cần thêm nó vào nhóm phụ thuộc khác.
pnpm add @unocss/resetBây giờ chúng ta cần cấu hình UnoCSS. Vui lòng mở tệp vite.config.ts và thêm plugin UnoCSS:
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), UnoCSS()],
})Sau đó, chúng ta cần thêm tệp uno.config.ts cùng với tệp vite.config.ts với cấu hình sau:
// uno.config.ts
import {
defineConfig,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives
} from 'unocss'
import { presetForms } from '@julr/unocss-preset-forms'
export default defineConfig({
presets: [
presetIcons({
extraProperties: {
display: 'inline-block',
'vertical-align': 'middle'
}
}),
presetForms(),
presetUno(),
presetTypography(),
presetWebFonts({
provider: 'google',
fonts: {
sans: 'Open Sans:100,200,300,400,500,600,700'
}
})
],
transformers: [transformerDirectives()]
})Okay, bước cuối cùng để cấu hình UnoCSS trong dự án của chúng ta là thêm một vài dòng trong tệp src/main.ts.
import { createApp } from 'vue'
import '@unocss/reset/tailwind.css'
import 'virtual:uno.css'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')Bạn sẽ nhận thấy rằng tôi đã thêm 2 dòng trên tệp nhúng style.css. Dòng đầu tiên thêm css reset để trang của chúng ta trông giống nhau trên các trình duyệt khác nhau. Và dòng tiếp theo cần thiết để thêm UnoCSS.
Hãy kiểm tra xem điều này có hoạt động bằng cách sửa đổi tệp src/style.css của chúng ta:
html {
font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
}
body {
@apply bg-gray-700 text-white;
}Với điều này, chúng ta đang đảm bảo rằng chúng ta đã kích hoạt các chỉ thị biến đổi. Và bây giờ hãy thử các lớp UnoCSS bằng cách sửa đổi tệp src/App.vue của chúng ta:
<template>
<div class="container mx-auto max-w-prose p-2 min-h-screen flex items-center justify-center">
<h1 class="text-5xl tracking-widest">TODOS</h1>
</div>
</template>Chúng ta đã cấu hình UnoCSS và thêm các lớp, bây giờ hãy chạy nó và xem nó có hoạt động không. Để làm điều đó, chúng ta cần đi đến terminal và chạy:
pnpm devMở một trình duyệt tại localhost:5173 và chúng ta sẽ thấy một cái gì đó như thế này:
Bạn thấy cách nền của chúng ta là màu xám đậm và tiêu đề TODOS của chúng ta là màu trắng không? Điều này được đặt trong tệp src/style.css với chỉ thị @apply. Sau đó trong tệp src/App.vue, chúng ta đã thêm một số html với rất nhiều lớp CSS, tất cả đều là phần của UnoCSS. Tôi sẽ không đi vào chi tiết vì sao bạn nên sử dụng nó, chỉ cần biết rằng kể từ khi tôi bắt đầu sử dụng nó (lúc tôi đang sử dụng TailwindCSS) nó đã làm cuộc sống của tôi với CSS Styling dễ dàng hơn nhiều.
Tiêu đề đề cập đến ESLint và Prettier. Nếu bạn không biết những công cụ này dùng để làm gì, hãy để tôi giải thích một cách ngắn gọn. ESLint sẽ nhìn vào mã JavaScript của bạn để tìm các mẫu không phải là thực hành tốt và chỉ ra nó để bạn biết bạn không nên làm như vậy. Prettier, ngược lại (như tên gọi ngụ ý), được sử dụng để định dạng mã của bạn để nó trông, haizz, đẹp hơn.
Chúng ta cần thêm các gói ESLint và Prettier trong terminal bằng cách chạy:
pnpm add -D @typescript-eslint/parser eslint eslint-config-prettier \
eslint-plugin-prettier eslint-plugin-vue \
prettier stylelint stylelint-config-recommended typescriptNếu bạn đọc qua các phụ thuộc, bạn sẽ nhận thấy rằng tôi đang thêm một phụ thuộc được gọi là StyleLint, cái này được sử dụng để làm cho CSS của bạn đẹp hơn.
Để cấu hình chúng, chúng ta cần thêm một vài tệp vào gốc của dự án của chúng ta. Tệp đầu tiên là tệp .eslintrc.cjs:
module.exports = {
env: {
browser: true,
node: true,
es2021: true
},
extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
// sourceType: 'module',
},
plugins: ['vue', 'prettier'],
rules: {
'vue/no-v': 'off',
'vue/multi-word-component-names': 'off',
'prettier/prettier': ['error']
}
}Tiếp theo là tệp .prettierrc.cjs:
module.exports = {
semi: false,
singleQuote: true,
tabWidth: 4,
trailingComma: 'none'
}Với điều đó, chúng ta đã cấu hình cả ESLint và Prettier. Bây giờ chúng ta cần cấu hình StyleLint bằng cách tạo tệp stylelint.config.cjs ngay bên cạnh chúng:
module.exports = {
extends: ['stylelint-config-recommended'],
rules: {
indentation: 4,
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'variants',
'responsive',
'screen'
]
}
],
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null
}
}Vui lòng lưu ý rằng tệp này không bắt đầu bằng một dấu chấm (.). Hãy làm việc để có được VSCode áp dụng các quy tắc này cho chúng ta khi lưu (tùy chọn khác là tạo các nhiệm vụ trong package.json mà chúng ta có thể chạy thủ công, nhưng ai muốn làm điều đó khi VSCode có thể làm điều đó cho bạn, phải không?). Chúng ta cần tạo tệp .vscode/settings.json:
{
"eslint.validate": ["vue", "javascript", "typescript"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"css.validate": false
}Đó là tất cả! Bây giờ khi bạn tải lại VSCode của bạn và bạn bắt đầu viết mã trong các tệp vue, typescript và css của bạn, chúng sẽ tự động định dạng khi lưu.
Cảm ơn bạn đã đồng hành cùng Cafedev trong hành trình tìm hiểu cách thiết lập VueJS 3 với Vite, UnoCSS và ESLint/Prettier. Hy vọng rằng bài viết đã mang lại cho bạn những thông tin hữu ích và sẽ giúp bạn tối ưu hóa dự án frontend của mình một cách hiệu quả. Đừng ngần ngại tiếp tục theo dõi chúng tôi để cập nhật những bài viết mới nhất và những kiến thức thú vị từ đội ngũ Cafedev. Chúc bạn thành công và mãi là một phần của cộng đồng Cafedev!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
