/
quadd4rv1n7
/
my-vite-project
GigaCode
beta
ОбзорЦентр заботыВойти

my-vite-project

Форк
0

Ветки: 1Коммиты: 2Теги: 0
.vscode
new file: .gitignore new file: .vscode/extensions.json new file: README.md new file: img/create_vite_project.png new file: img/vite_build.png new file: img/vite_preview.png new file: index.html new file: package-lock.json new file: package.json new file: public/vite.svg new file: src/App.vue new file: src/assets/vue.svg new file: src/components/HelloWorld.vue new file: src/main.js new file: src/style.css new file: vite.config.js
месяц назад
img
modified: README.md new file: img/vite.png
месяц назад
public
new file: .gitignore new file: .vscode/extensions.json new file: README.md new file: img/create_vite_project.png new file: img/vite_build.png new file: img/vite_preview.png new file: index.html new file: package-lock.json new file: package.json new file: public/vite.svg new file: src/App.vue new file: src/assets/vue.svg new file: src/components/HelloWorld.vue new file: src/main.js new file: src/style.css new file: vite.config.js
месяц назад
src
new file: .gitignore new file: .vscode/extensions.json new file: README.md new file: img/create_vite_project.png new file: img/vite_build.png new file: img/vite_preview.png new file: index.html new file: package-lock.json new file: package.json new file: public/vite.svg new file: src/App.vue new file: src/assets/vue.svg new file: src/components/HelloWorld.vue new file: src/main.js new file: src/style.css new file: vite.config.js
месяц назад
.gitignore
new file: .gitignore new file: .vscode/extensions.json new file: README.md new file: img/create_vite_project.png new file: img/vite_build.png new file: img/vite_preview.png new file: index.html new file: package-lock.json new file: package.json new file: public/vite.svg new file: src/App.vue new file: src/assets/vue.svg new file: src/components/HelloWorld.vue new file: src/main.js new file: src/style.css new file: vite.config.js
месяц назад
README.md
modified: README.md new file: img/vite.png
месяц назад
index.html
new file: .gitignore new file: .vscode/extensions.json new file: README.md new file: img/create_vite_project.png new file: img/vite_build.png new file: img/vite_preview.png new file: index.html new file: package-lock.json new file: package.json new file: public/vite.svg new file: src/App.vue new file: src/assets/vue.svg new file: src/components/HelloWorld.vue new file: src/main.js new file: src/style.css new file: vite.config.js
месяц назад
package-lock.json
new file: .gitignore new file: .vscode/extensions.json new file: README.md new file: img/create_vite_project.png new file: img/vite_build.png new file: img/vite_preview.png new file: index.html new file: package-lock.json new file: package.json new file: public/vite.svg new file: src/App.vue new file: src/assets/vue.svg new file: src/components/HelloWorld.vue new file: src/main.js new file: src/style.css new file: vite.config.js
месяц назад
package.json
new file: .gitignore new file: .vscode/extensions.json new file: README.md new file: img/create_vite_project.png new file: img/vite_build.png new file: img/vite_preview.png new file: index.html new file: package-lock.json new file: package.json new file: public/vite.svg new file: src/App.vue new file: src/assets/vue.svg new file: src/components/HelloWorld.vue new file: src/main.js new file: src/style.css new file: vite.config.js
месяц назад
vite.config.js
new file: .gitignore new file: .vscode/extensions.json new file: README.md new file: img/create_vite_project.png new file: img/vite_build.png new file: img/vite_preview.png new file: index.html new file: package-lock.json new file: package.json new file: public/vite.svg new file: src/App.vue new file: src/assets/vue.svg new file: src/components/HelloWorld.vue new file: src/main.js new file: src/style.css new file: vite.config.js
месяц назад
README.md

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

vite

Vite — это современный инструмент для сборки фронтенд-проектов, разработанный для повышения скорости и улучшения опыта разработки.

Название "Vite" (произносится как "вит") на французском языке означает "быстро".

Основная цель Vite — обеспечить высокую скорость сборки и перезагрузки на этапах разработки, особенно для крупных проектов. Он был создан создателем Vue.js, Эваном Ю.

Создание проекта на Vite

  1. Откройте терминал или командную строку.

  2. Выполните следующую команду для создания нового проекта с помощью Vite:

npm create vite@latest

vite

  1. Система предложит выбрать имя для проекта. Введите имя проекта (например, my-vite-project).

  2. Затем вам будет предложено выбрать шаблон проекта (например, Vanilla, Vue, React, Svelte и другие).

Выберите тот, который вам нужен, например:

  • vanilla (чистый JavaScript проект)
  • vue (если вы хотите использовать Vue.js)
  • react (если хотите использовать React)

Пример выбора шаблона Vue:

? Select a framework: » - Use arrow-keys. Return to submit.
  Vanilla
  Vue
  React
  ...
  1. Перейдите в папку с созданным проектом:
cd my-vite-project
  1. Установите зависимости, выполнив:
npm install

3. Запуск проекта

Запустите проект на локальном сервере разработки:

npm run dev

Теперь Vite запустит сервер разработки, и вы сможете перейти по адресу, указанному в консоли (обычно это http://localhost:5173), чтобы увидеть свой проект.

4. Структура проекта

После создания проекта структура будет выглядеть примерно так:

vite-project/
├── index.html            # Главный HTML-файл
├── package.json          # Информация о проекте и зависимости
│
├── src/                  # Исходный код
│   ├── main.js           # Точка входа приложения
│   └── App.vue (если выбрано Vue)
│
└── vite.config.js        # Конфигурационный файл Vite

5. Дополнительно

Создание сборки для продакшн: Когда проект будет готов для публикации, выполните команду.

npm run build
  • Эта команда создаст оптимизированную версию проекта в папке dist.

vite

Запуск предварительного просмотра продакшн-версии:

npm run preview

vite

Теперь у вас есть базовый проект на Vite, который можно расширять в зависимости от ваших требований.

Преподаватель: Дуплей Максим Игоревич

Дата: 12.09.2024

Версия 1.0

Описание

Vite — это современный инструмент для сборки фронтенд-проектов, разработанный для повышения скорости и улучшения опыта разработки.

javascript
js
vue
json
vite
vue3
quadd4rv1n7
maximdupley
2024
vuejs
vue-router
repository
repo
Избранное0
Следят1

Языки

Vue

  • HTML
  • JavaScript
  • CSS
Сообщить о нарушении

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.