PT Proweb Indonesia

Creating websites for over 21 years

Struktur Folder Instalasi Awal Vue.js

Setelah kita membuat proyek pertama Vue.js maka akan terbentuk folder-folder yang diperlukan untuk pengembangan aplikasi. Kita perlu memahami struktur folder ini supaya memiliki pemahaman menyeluruh Vue.js

Struktur folder instalasi awal Vue.js adalah seperti pada penjelasan-penjelasan berikut ini

  1. Folder root
  2. Folder src
    Daftar sub-sub folder src:

    Folder src ini merupakan tempat kita mengembangkan aplikasi.

    Folder assets untuk meletakkan file css, gambar dan aset-aset lain:


    Folder components untuk meletakkan komponen-komponen aplikasi:


    Folder stores sebagai folder penyimpanan:


    Folders views untuk menyimpan file-file berkaitan dengan tampilan:
  3. Application entry
    a. main.ts:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import './assets/main.css'
     
    import { createApp } from 'vue'
    import { createPinia } from 'pinia'
     
    import App from './App.vue'
    import router from './router'
     
    const app = createApp(App)
     
    app.use(createPinia())
    app.use(router)
     
    app.mount('#app')

    b. App.vue:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    <script setup lang="ts">
    import { RouterLink, RouterView } from 'vue-router'
    import HelloWorld from './components/HelloWorld.vue'
    </script>
     
    <template>
      <header>
        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
     
        <div class="wrapper">
          <HelloWorld msg="You did it!" />
     
          <nav>
            <RouterLink to="/">Home</RouterLink>
            <RouterLink to="/about">About</RouterLink>
          </nav>
        </div>
      </header>
     
      <RouterView />
    </template>
     
    <style scoped>
    header {
      line-height: 1.5;
      max-height: 100vh;
    }
     
    .logo {
      display: block;
      margin: 0 auto 2rem;
    }
     
    nav {
      width: 100%;
      font-size: 12px;
      text-align: center;
      margin-top: 2rem;
    }
     
    nav a.router-link-exact-active {
      color: var(--color-text);
    }
     
    nav a.router-link-exact-active:hover {
      background-color: transparent;
    }
     
    nav a {
      display: inline-block;
      padding: 0 1rem;
      border-left: 1px solid var(--color-border);
    }
     
    nav a:first-of-type {
      border: 0;
    }
     
    @media (min-width: 1024px) {
      header {
        display: flex;
        place-items: center;
        padding-right: calc(var(--section-gap) / 2);
      }
     
      .logo {
        margin: 0 2rem 0 0;
      }
     
      header .wrapper {
        display: flex;
        place-items: flex-start;
        flex-wrap: wrap;
      }
     
      nav {
        text-align: left;
        margin-left: -1rem;
        font-size: 1rem;
     
        padding: 1rem 0;
        margin-top: 1rem;
      }
    }
    </style>

    c. View untuk home:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script setup lang="ts">
    import TheWelcome from '../components/TheWelcome.vue'
    </script>
     
    <template>
      <main>
        <TheWelcome />
      </main>
    </template>
  4. Folder public yang bisa diakses secara langsung

Kunjungi https://www.proweb.co.id/jasa-pembuatan-website untuk jasa pembuatan website di Jakarta  .

Struktur Folder Instalasi Awal Vue.js
Ada yang dapat saya bantu ?