Tailwind CSS с Vue.js

Блог

Tailwind CSS с Vue.js

tailwindcss-with-vuejs

Настройка на проекта

npm install

Компилира и горещо презарежда за разработка

npm run serve

Събира и минимизира за производство

npm run build

Линтира и поправя файлове

npm run lint

Персонализирайте конфигурацията

Вижте Справка за конфигурация .

Настройте Tailwind CSS

Инсталирайте зависимости

npm install tailwindcss postcss autoprefixer - Note: if see error like `Error: PostCSS plugin tailwindcss requires PostCSS 8.`, uninstall Tailwind and re-install using the compatibility build instead: npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Настройте файловете tailwind.config и postcss.config

npx tailwindcss init -p - Note: if see error like `Cannot find module 'autoprefixer'`, try above: npx tailwindcss init -p

Създайте tailwind.css

e.g. create the tailwind.css file under /assets/css directory @tailwind base; @tailwind components; @tailwind utilities;

Импортирайте tailwind.css в main.js

import './assets/css/tailwind.css';

Оптимизиране за производство с Purgecss

Инсталирайте зависимост

npm install -D @fullhuman/postcss-purgecss

Конфигуриране на postcss

Update tailwind.config.js file, provide an array of paths to all of your template files using the purge option: // tailwind.config.js module.exports = { purge: ['./src/**/*.vue', './public/index.html'], ... };
  • Сега, когато компилирате вашия CSS с NODE_ENV, настроен за производство, Tailwind автоматично ще изчисти неизползваните стилове от вашия CSS.

Хост с Firebase

сайт на живо: [ https://vue-tailwind-workcation.web.app/ ]

curl командата не е намерена ubuntu

Изградете проект

npm run build

Init проект на Firebase

firebase login firebase init Note: Pick /dist folder as the public directory

Разгърнете

firebase deploy

Подробности за изтегляне:

Автор: weilyuwang

Програмен код: https://github.com/weilyuwang/tailwindcss-with-vue-workcation

react-native-zip-архив

#vue #vuejs #javascript