Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]
В данном туториале мы рассмотрим как создать универсальный стартовый шаблон для твоих пет-проектов, используя JavaScript, SASS и Vite в 2023 году.
Что такое Vite? Vite – это современный сборщик приложений для веб-разработки, который позволяет быстро и эффективно создавать проекты с использованием современных технологий.
Шаг 1: Установка Vite
Для начала создания универсального стартового шаблона с Vite, необходимо установить Vite на вашем компьютере. Для этого выполните следующие команды:
npm init vite@latest
cd your-project-name
npm install
Шаг 2: Создание базовой структуры проекта
После установки Vite, необходимо создать базовую структуру проекта. Создайте следующие папки и файлы:
src
– папка для хранения исходных файловsrc/index.html
– главный HTML файлsrc/index.js
– главный JavaScript файлsrc/styles
– папка для хранения стилейsrc/styles/main.scss
– главный SASS файл
Шаг 3: Настройка Vite
Откройте файл vite.config.js
и настройте Vite для работы с JavaScript и SASS:
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig({
build: {
outDir: 'dist',
},
resolve: {
alias: {
'@': resolve(__dirname, '/src'),
},
},
})
Шаг 4: Настройка сборки JavaScript
Откройте файл src/index.js
и добавьте следующий код для проверки работы JavaScript:
console.log('Hello, world!')
Шаг 5: Настройка сборки SASS
Откройте файл src/styles/main.scss
и добавьте следующий код для проверки работы SASS:
$color: #333;
body {
background-color: $color;
}
Шаг 6: Запуск проекта
После завершения всех предыдущих шагов, запустите проект с помощью следующей команды:
npm run dev
Откройте браузер и перейдите по адресу http://localhost:3000
, чтобы убедиться, что ваш универсальный стартовый шаблон работает как ожидается.
Шаг 7: Дополнительные настройки
Далее вы можете добавить дополнительные функциональности к вашему проекту, такие как поддержка TypeScript, ESLint, Prettier и других инструментов для улучшения качества вашего кода.
Теперь у вас есть универсальный стартовый шаблон для твоих пет-проектов с JS, SASS и Vite в 2023 году. Не забудьте экспериментировать и создавать уникальные приложения с помощью этого шаблона!
Благодарю! Просто и лаконично. Лайк, подписка)
ну такое
Привет, что если для WP?
С обновлением страниц при добавлении каких-то стилей или JS?
и еще Dart-sass?
Круть!
не пишите в JS, все в серьезных компаниях давно пишут только на TS
Весь проект – два квадрата на экране, а мусора в нём больще чем кода doom2 и windows95 вместе взятых. Хорошее пособие, как из страны с лучшими программистами, скатиться до уровня Индии или Китая.
Интересный ролик!
Все очень понятно и без воды. Спасибо за информацию
Быстро, понятно, по делу. Спасибо!
Подскажите, пожалуйста, для чего в файле index.html остался div с id app?
Спасибо!
Спасибо, постоянно сложно вкатиться в технологии, но здесь я узнал много чего и сразу понял, где всё эти знания применить)
просто лучший . У меня есть такая штука как страх нового и это моя главная проблема. Я изучаю это направление и столько ошибок бля , я не могу. Твои видео помогаю мне проходить через эти трудности , спасибо. Уже не первый раз помогает.
Здравствуйте, у меня не получается корреткно подключить saas к vue.js на vite. Не могли бы вы снять видео по этой теме или хотя бы обьяснить что к чему?
Парень спасибо тебе, ты отлично обьясняешь, продолжай вести канал, и рассказывай нам обо всем, будем рады тебя послушать, с меня подписка и миллион лайков❤
Видео очень полезное!
Только как быть, если сайт многостраничный, как всё организовать? Постаралась сделать на основе этого видео, не работает(
Я сайт с современным функционалом, задавайте вопросы
Спасибо большое за видео, супер👍
ничего что все стили при таком подходе прописываются в head? )) на отипись сборка на уровне галпа
thank you very helpful