របៀបក្នុងការរួមបញ្ចូលមុខងារផ្ទៃពន្លឺឆ្លាតវៃសម្រាប់អ្នកអភិវឌ្ឍន៍លើ Nuxt.js ដោយប្រើប្រាស់ @nuxt/color-mode module ជាមួយនឹង TailwindCSS
បន្ទាប់ពីយល់ដឹងពីការប្រើប្រាស់ និងរួមបញ្ចូលមុខងារបកប្រែយ៉ាងងាយស្រួល និងរហ័ស មុខងារដែលមិនអាចខ្វះ និងមើលរំលងបានសោះឡើយគឺ មុខងារកែប្រែផ្ទៃពណ៌នៃផ្ទាំងប្រើប្រាស់ឲ្យស្របទៅតាមចំណង់ចំណូលចិត្តរបស់អ្នកប្រើ។ ការដែលកម្មវិធីមួយមានមុខងារសំខាន់បែបនេះ នោះបទពិសោធន៍ប្រើប្រាស់នៃអ្នកប្រើកាន់តែល្អតាមហ្នឹងផងដែរ។ មិនខុសគ្នាពីមុខងារភាសា មុខងារប្តូរពណ៌ផ្ទៃមួយនេះ គឺមិនមានភាពស្មុគស្មាញ ឬពិបាករួមបញ្ចូលឡើយ បូកផ្សំជាមួយនឹងភាពសម្បូរបែប និងការគាំទ្រពេញទំហឹងពី TailwindCSS ទៀតនោះ ការរួមបញ្ចូលមុខងារមួយនេះអោយបានជោគជ័យ គឺរឹតតែលែងជាបញ្ហាទៀតឡើយ។
១. តម្លើង @nuxt/color-mode module
តម្លើង CLI Command ខាងក្រោមនៅលើ Terminal សម្រាប់កម្មវិធីរបស់អ្នកដើម្បីប្រើប្រាស់ @nuxt/color-mode module ។
npx nuxi@latest module add color-mode
បន្ថែម '@nuxt/color-mode' នៅក្នុង modules property ក្នុងឯកសារ nuxt.config.ts ដើម្បីហៅយកមកប្រើ ។
export default defineNuxtConfig({
modules: [
"@nuxt/color-mode"
]
});
២. តម្លើង TailwindCSS
បញ្ជាក់៖ ប្រសិនបើអ្នកទាំងអស់គ្នាបានតម្លើង TailwindCSS និង Setup រួចរាល់អស់ហើយតាំងពីបង្កើត Project ដំបូង ដូច្នេះអាចរំលងចំណុចទី២បាន។
វិធីទី ១
ងាយស្រួលបំផុតក្នុងការតម្លើង TailwindCSS ដោយប្រើប្រាស់នូវ Nuxt Module ផ្លូវការសម្រាប់ TailwindCSS តែម្តង ដោយគ្រាន់តែ run command មួយនេះ ៖
npx nuxi@latest module add tailwindcss
រួចបន្ថែម '@nuxtjs/tailwindcss' ទៅក្នុង module ក្នុង nuxt.config.ts ជាការស្រេច។
export default defineNuxtConfig({
modules: [
"@nuxtjs/tailwindcss"
]
});
វិធីទី ២
ករណីអ្នកមិនចង់ប្រើ Nuxt Module ឬចង់ធ្វើការ config ចំណុចផ្សេងៗ អ្នកអាចតម្លើង Dependency ដោយផ្ទាល់ពី TailwindCSS តែម្តង ដែលតម្រូវឪ្យមានការ setup មួយចំនួនដូចខាងក្រោម៖
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init
បន្ថែម Tailwind ទៅកាន់ PostCSS configuration និង CSS file នៅក្នុង nuxt.config.ts ។
export default defineNuxtConfig({
css: ["~/assets/css/main.css"],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
});
ចូល configure ក្នុង tailwind.config.js
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue",
],
theme: {
extend: {},
},
plugins: [],
};
បង្កើតឯកសារ css ថ្មីមួយ និងបញ្ចូល៖
@tailwind base;
@tailwind components;
@tailwind utilities;
៣. បង្កើត trigger component
ចំពោះ theme toggle component អ្នកទាំងអស់គ្នាអាច design និងរៀបចំផ្ទៃ UI ដោយខ្លួនឯងបាន ប្រសិនបើចង់រចនាដោយខ្លួនឯង។ ខាងក្រោមជាកូដដែលខ្ញុំឧទាហរណ៍។
<script setup lang="ts">
const colorMode = useColorMode();
</script>
<template>
<div>
<h1>Theme mode: {{ $colorMode.value }}</h1>
<select v-model="$colorMode.preference">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="sepia">Sepia</option>
</select>
</div>
</template>
៤. របៀបប្រើប្រាស់ TailwindCSS class ដើម្បីកំណត់ពណ៌ពេលផ្លាស់ប្តូរផ្ទៃប្រើប្រាស់
ដើម្បីកំណត់ពណ៌បង្ហាញនៅពេលមានការផ្លាស់ប្តូរម៉ូដពណ៌នៃផ្ទាំងប្រើប្រាស់ទៅកាន់ម៉ូដងងឹត គឺគ្រាន់តែបន្ថែម dark: class និងតម្លៃនៃពណ៌យើងដែលចង់ឲ្យបង្ហាញនៅពេលផ្លាស់ប្តូរ។ មើលឧទាហរណ៍ខាងក្រោម៖
<script setup lang="ts">
const colorMode = useColorMode();
</script>
<template>
<div class="bg-white dark:bg-black">
<h1 class="text-black dark:text-white">Hello World!</h1>
<button
class="border border-slate-500 dark:border-slate-950 hover:bg-slate-200 dark:hover:bg-slate-900">
Click me!
</button>
</div>
</template>
បន្ទាប់ពីបាន implement រួចហើយ អបអរសាទរ អ្នកបានរួមបញ្ចូលឬបង្កើតមុខងារសំខាន់មួយនេះដោយជោគជ័យហើយ។ ✨🥳 មើលឧទាហរណ៍ខាងក្រោម ឬចូលតេស្តផ្ទាល់នៅ ទីនេះ បាន។
📚 ប្រភព និងឯកសារពាក់ព័ន្ធសម្រាប់ស្វែងយល់បន្ថែម
Comment
Leave your thoughts and feedback below. We can discuss, reply, and engage here.