DEV Community

Cover image for Vite orqali Vue loyiha qurish.
Mukhriddin Khodiev (work)
Mukhriddin Khodiev (work)

Posted on • Edited on

1 1

Vite orqali Vue loyiha qurish.

** Demak Vite texnologiyasi yordamidan Vue loyiha qurishni o'rganamiz!

Vite — Vue.js ilovasini yaratish uchun tez va samarali texnologiya hisoblanadi. Quyida Vite yordamida Vue.js (app) yaratish jarayonini batafsil ko'rib chiqamiz.

1. Muhitni tayyorlash kerak (Preparation of the environment)
Birinchidan, kompyuteringizda Node.js o'rnatilganligiga ishonch hosil qiling. Node.js ni rasmiy saytidan yuklab olish mumkin.

2. Yangi Vue.js loyihasini yaratish:
a. Terminal yoki komanda qatori (Command Prompt) ni ochamiz
b. Loyihani yaratish uchun quyidagi buyruqni bajaring:

Image description

va

npm create vite@latest [loyiha_nomi]
Enter fullscreen mode Exit fullscreen mode

Image description

Bu buyruq yangi Vite loyihasini my-app nomi bilan yaratadi va Vue.js shablonidan foydalanishni tanlaymiz.

Image description

va bu yerda JavaScriptni tanlaymiz (hozircha) keyinroq TypeScript yoki Nuxt uchun bemalol ishlab ketaveramiz o'rganish uchun JavaScriptdan boshlashimiz mumkin bo'ladi.

Image description

 cd my-app
  npm install
  npm run dev
Enter fullscreen mode Exit fullscreen mode

yuqoridagi buyruq orqali biz kerakli "package" larni o'rnatib olib loyihamizni ishga tushurishimiz mukin bo'ladi.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Ushbu buyruqdan so'ng, terminalda mahalliy (local) server manzili ko'rsatiladi, odatda bu http://localhost:3000 yoki 5174 bo'ladi. Brauzeringizda ushbu manzilga o'tib, yangi Vue.js ilovamizni ko'rishimiz mumkin.

Image description

3. Loyiha Tuzilmasi
Loyiha yaratib, ochilganingizdan so'ng, loyiha tuzilmasi (strukturasi) quyidagicha bo'ladi:


my-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── vue.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

Enter fullscreen mode Exit fullscreen mode

Image description

Keyingi maqolada Vue.js loyihamizning tuzilmasi va fayllari , folderlarga, fayllarga qanday nom berish kerak .

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more