برنامه نویسی

درباره ساختار پروژه Vue.js ما. – انجمن DEV

ek3nk4r 2024-06-16

0 1 خواندن این مطلب 3 دقیقه زمان میبرد

درباره ساختار پروژه Vue.js ما. – انجمن DEV

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

﷽

درود بر شما!

هنگامی که یک پروژه Vue.js از طریق Vite ایجاد می شود، ساختار پروژه به صورت زیر است. بیایید در مورد هدف و عملکرد هر دایرکتوری و فایل بیشتر بدانیم.

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

اساس پروژه

`node_modules/`

تمام بسته ها و ماژول های پروژه ما در این دایرکتوری ذخیره می شوند. npm install دستور تمام بسته های لازم را در این دایرکتوری بارگذاری می کند.

`public/`

این دایرکتوری فایل های استاتیک رایج پروژه ما را نگه می دارد. فایل‌های موجود در این دایرکتوری در زمان ساخت برنامه بدون تغییر در بیلد نهایی کپی می‌شوند. مثلا، vite.svg فایل.

`src/`

کد منبع اصلی پروژه ما در این دایرکتوری قرار دارد. همه اجزاء، سبک ها، تصاویر و سایر منابع در اینجا ذخیره می شوند.

`src/assets/`

این فهرست تصاویر، فونت ها و دیگر منابع ثابت پروژه ما را ذخیره می کند. مثلا، vue.svg فایل.

`src/components/`

این دایرکتوری اجزای Vue را ذخیره می کند. هر جزء جداگانه است .vue در فایل ذخیره می شود. مثلا، HelloWorld.vue.

`src/App.vue`

این یک جزء اساسی Vue است. این کامپوننت شامل ساختار اصلی برنامه شما و سایر اجزا است.

`src/main.js`

این فایل نقطه ورودی برای اجرای برنامه ما است. در این فایل اپلیکیشن Vue ایجاد شده و کامپوننت اصلی (App.vue) را به یک فایل HTML درون خود تبدیل کنیم، و همچنین می توانیم برخی از فایل های css خود را به صورت جهانی پیوند دهیم.

import { createApp } from 'vue'
// import "./style.css" (misol)
import App from './App.vue'

createApp(App).mount('#app')

`.gitignore`

این فایل مشخص می کند که کدام فایل ها و دایرکتوری ها نباید به کنترل نسخه برای Git اضافه شوند. مثلا، node_modules وا dist کاتالوگ ها

`index.html`

این فایل HTML اصلی برای دسترسی به برنامه ما است. این مشخص می کند که کجا برنامه خود را آپلود کنید.


 lang="en">
  
     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Vite + Vue<span class="nt"/>
  <span class="nt"/>
  <span class="nt"/>
    <span class="nt"><p> <span class="na">id=</span><span class="s">"app"</span><span class="nt">></span></p></span>
    <span class="nt"><script><![CDATA[<span class="na">type=]]></script></span><span class="s">"module"</span> <span class="na">src=</span><span class="s">"/src/main.js"</span><span class="nt">></span>
  <span class="nt"/>
<span class="nt"/>
</span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>وارد حالت تمام صفحه شوید



  package.json


این فایل ابرداده ها، وابستگی ها، اسکریپت ها و سایر تنظیمات پروژه ما را ذخیره می کند.  مثلا:

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "vite": "^2.0.0"
  }
}



    
    




  README.md


این فایل سندی است که اطلاعاتی در مورد پروژه ما ارائه می دهد.  در اینجا دستورالعمل هایی در مورد نحوه نصب و اجرای پروژه آورده شده است.

  vite.config.js


این فایل پیکربندی Vite را ذخیره می کند.  در این فایل فرآیند ساختار قابل تغییر و توسعه است.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})



    
    




  فهرست ها و فایل های اضافی



  1. src/store/


اگر برنامه شما از کتابخانه های مدیریت دولتی مانند Vuex یا Pinia استفاده می کند، این فهرست فایل های مدیریت فروشگاه جهانی را ذخیره می کند.

  2. src/router/


اگر برنامه شما از Vue Router استفاده می کند، در دایرکتوری (مسیرهای صفحه، قوانین) ذخیره می شود.

  3. src/styles/


دایرکتوری که در آن سبک های رایج ذخیره می شوند.  به عنوان مثال، فایل های جهانی CSS یا SASS.

  4. src/utils/


دایرکتوری برای توابع کاربردی رایج و سایر کدهای رایج.

  گسترش پروژه


ساختار بالا ساختار اصلی (struct) برای شروع برنامه Vue.js شما است.  همانطور که پروژه ما رشد می کند، می توانیم دایرکتوری ها و فایل های اضافی اضافه کنیم.  از طریق مدولارسازی، سازماندهی، استفاده مجدد و مدیریت کد آسان تر می شود.  بیایید به یادگیری Vue.js BaarakAllahu fiikum ادامه دهیم!
https://t.me/mukhriddinweb
https://khodieff.uz