Шаблон для создания пэт-проектов с помощью JS, SASS и Vite: все для твоего успешного старта [2023]

Posted by


Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с 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 году. Не забудьте экспериментировать и создавать уникальные приложения с помощью этого шаблона!

0 0 votes
Article Rating
27 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@Happyendrew
2 months ago

Благодарю! Просто и лаконично. Лайк, подписка)

@nigless_
2 months ago

ну такое

@user-sf7lz8fn4r
2 months ago

Привет, что если для WP?
С обновлением страниц при добавлении каких-то стилей или JS?
и еще Dart-sass?

@АитмухаметХожакельдиев
2 months ago

Круть!

@cro_codif
2 months ago

не пишите в JS, все в серьезных компаниях давно пишут только на TS

@WebDepNet
2 months ago

Весь проект – два квадрата на экране, а мусора в нём больще чем кода doom2 и windows95 вместе взятых. Хорошее пособие, как из страны с лучшими программистами, скатиться до уровня Индии или Китая.

@LAMit
2 months ago

Интересный ролик!

@nafisgarifullin7199
2 months ago

Все очень понятно и без воды. Спасибо за информацию

@keys_wow
2 months ago

Быстро, понятно, по делу. Спасибо!

@Ekaterinn
2 months ago

Подскажите, пожалуйста, для чего в файле index.html остался div с id app?

@hehe_boiii
2 months ago

Спасибо!

@kl1ko_beats
2 months ago

Спасибо, постоянно сложно вкатиться в технологии, но здесь я узнал много чего и сразу понял, где всё эти знания применить)

@pinguinRu
2 months ago

просто лучший . У меня есть такая штука как страх нового и это моя главная проблема. Я изучаю это направление и столько ошибок бля , я не могу. Твои видео помогаю мне проходить через эти трудности , спасибо. Уже не первый раз помогает.

@Bondik_
2 months ago

Здравствуйте, у меня не получается корреткно подключить saas к vue.js на vite. Не могли бы вы снять видео по этой теме или хотя бы обьяснить что к чему?

@user-th4gy4sz8j
2 months ago

Парень спасибо тебе, ты отлично обьясняешь, продолжай вести канал, и рассказывай нам обо всем, будем рады тебя послушать, с меня подписка и миллион лайков❤

@user-ym6hk8zw4x
2 months ago

Видео очень полезное!
Только как быть, если сайт многостраничный, как всё организовать? Постаралась сделать на основе этого видео, не работает(

@supernatural4145
2 months ago

Я сайт с современным функционалом, задавайте вопросы

@trustambassador
2 months ago

Спасибо большое за видео, супер👍

@sartjhon3300
2 months ago

ничего что все стили при таком подходе прописываются в head? )) на отипись сборка на уровне галпа

@juliaukasiewicz3095
2 months ago

thank you very helpful