Введение
В этом уроке я покажу вам, как добавить виджет datepicker в ваше приложение Vue.
Мы будем использовать плагин vue-tailwind-datepicker.
Это руководство начнется с самого начала, мы установим приложение Vue, затем добавим CSS-фреймворк Tailwind, который является обязательным для vue-tailwind-datepicker.
Установите VueJs
Начнем с инициализации приложения Vue:
npm init vue@latest
Эта команда установит и выполнит create-vue, официальный инструмент для создания лесов проекта Vue.
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
После создания проекта следуйте инструкциям по установке зависимостей и запуску dev-сервера:
cd <your-project-name>
npm install
Установите Tailwind CSS
Установите tailwindcss и аналогичные зависимости через npm, а затем выполните команду init для создания tailwind.config.js
и postcss.config.js
.
npm install -D tailwindcss postcss autoprefixer
Добавьте пути ко всем файлам шаблонов в файл tailwind.config.js
.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Добавьте директивы @tailwind для каждого из слоев Tailwind в файл ./src/style.css.
/* ./src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Наконец, убедитесь, что ваш файл CSS импортируется в файл ./src/main.js:
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
Установите tailwindcss/forms
vue-tailwind-datepicker использует tailwindcss/forms, он обеспечивает базовый сброс стилей формы, что позволяет легко переопределять элементы формы с помощью утилит.
Установите плагин из npm:
npm install -D @tailwindcss/forms
Затем добавьте плагин в ваш файл tailwind.config.js
:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
}
Установите day.js
Vue Tailwind Datepicker использует Day.js под капотом, мы должны установить этот пакет, просто выполнив эту команду:
npm i dayjs
Установить vue-tailwind-datepicker
Теперь мы будем следовать официальной документации по пакету, вы можете найти ее здесь:
vue-tailwind-datepicker.com
Установите пакет, выполнив эту команду:
npm install vue-tailwind-datepicker
Вы можете настроить компонент глобально, используя его при инициализации вашего приложения:
// main.js
import { createApp } from 'vue'
import App from '@/App.vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
// ...
const app = createApp(App)
app.use(VueTailwindDatepicker)
app.mount('#app')
Теперь мы должны завершить конфигурацию tailwind, настроив цвета датапикера.
Мы должны добавить эту строку: "./node_modules/vue-tailwind-datepicker/**/*.js"
в раздел content.
Тема Vue Tailwind Datepicker является настраиваемой, поэтому вы можете настроить тему на любой цвет, который вы хотите, через конфигурацию Tailwind CSS. И все будет работать хорошо.
Цветовая система светлого режима использует пользовательский цвет vtd-primary
.
Система цветов темного режима использует цветовую палитру vtd-secondary
. Vue Tailwind Datepicker хорошо работает с конфигурацией темного режима Tailwind CSS.
// tailwind.config.js
const colors = require("tailwindcss/colors")
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/vue-tailwind-datepicker/**/*.js"
],
theme: {
extend: {
colors: {
"vtd-primary": colors.sky, // Light mode Datepicker color
"vtd-secondary": colors.gray, // Dark mode Datepicker color
},
},
},
plugins: [
require('@tailwindcss/forms'),
]
}
Запустите ваше приложение
Теперь вы можете запустить свое приложение и настроить датапикер в соответствии с вашими попытками:
npm run serve
Вы можете найти все реквизиты здесь:
- https://vue-tailwind-datepicker.com/props.html
vue-tailwind-datepicker — это хороший плагин, который хорошо интегрирован с проектами Vue/tailwind, он мощный, и у вас есть много реквизитов, доступных для настройки вашего datepicker.
Демо-версия
Вы можете найти демо-версию в основной документации
Также вы можете протестировать vue-tailwind-datepicker на официальной игровой площадке через Stackblitz.
Все отлично!
Теперь вы можете использовать свой datepicker в своем приложении.
Пожалуйста, не забудьте добавить старт на Github репо плагина:
https://github.com/elreco/vue-tailwind-datepicker
Спасибо,
Александр.