Penataan Aplikasi Vue

Saat ini saya mencoba membangun aplikasi web pertama saya menggunakan vue.js

Sekarang tutorial mendalam 2 hari saya masih belum 100% yakin bagaimana menyusun aplikasi dasar. Menggunakan vue-cli dan webpack sudah membuat struktur yang bagus, termasuk Folder /src dengan komponen dan Folder /router untuk routing.

Sekarang rencana saya adalah membuat Aplikasi ToDo. Saya ingin beralih secara dinamis antara [tampilkan todos] dan [add todo], yang hanya berupa formulir dengan tombol kirim. Saya telah mencapainya dengan menggunakannya tanpa komponen dan cli.

Struktur saya adalah:

App.vue -› tombol dengan dua router-link ke komponen/ShowTodos.vue & komponen/AddTodos.vue

components/ShowTodos.vue -› Tabel termasuk daftar tugas

components/AddTodos.vue -› Formulir dengan tombol kirim

Sekarang bagian perutean berfungsi, saya dapat beralih di antara kedua komponen tersebut.

Sekarang 2 Pertanyaan:

  1. Bagaimana saya bisa memasukkan informasi dari formulir di komponen AddTodos ke dalam Array di komponen ShowTodos untuk mengulang ke sana?

  2. Apakah ini cara yang tepat untuk menyusun aplikasi vue, dan jika tidak, bagaimana cara memperbaikinya?

    Terima kasih banyak.

Ini adalah pertama kalinya saya menggunakan JS Framework berbasis komponen, jadi cukup sulit untuk mengikutinya.

masukkan deskripsi gambar di sini


javascript vue.js vue-router vuejs2 vue-component
person miaue    schedule 20.08.2017    source sumber

Jawaban (3)


arrow_upward
1
arrow_downward

Dalam menyusun aplikasi vuejs Anda, ini dapat membantu

app/
   moduleA/
      components/
      index.js
      routes.js
   moduleB/
      components/
      index.js
      routes.js
   index.js
   routers.js
   main.vue
   router/
   components/ -> shared
   main.js

// app/routes.js
import { routes as moduleA } from './moduleA'
import { routes as moduleB } from './moduleB'
export default [ ...moduleA, ...moduleB ]

// app/moduleA/index.js
export { default as routes } from './routes'

// app/moduleB/index.js
export { default as routes } from './routes'

// app/index.js
export { default as routes } from './routes

'

person Husni Abdul Nazer    schedule 20.08.2017

arrow_upward
1
arrow_downward

Tentang pertanyaan kedua, saya melakukan beberapa penelitian, dan inilah yang saya rekomendasikan:

.
├── app.css
├── App.vue
├── assets
│   └── ...
├── components
│   └── ...
├── main.js
├── mixins
│   └── ...
├── router
│   └── index.js
├── store
│   ├── index.js
│   ├── modules
│   │   └── ...
│   └── mutation-types.js
├── translations
│   └── index.js
├── utils
│   └── ...
└── views
    └── ...

Baca selengkapnya di sini: https://medium.com/@sandoche/how-to-structure-a-vue-js-project-eabe75161882

person Sandoche    schedule 12.06.2018

arrow_upward
0
arrow_downward

Saya dapat merekomendasikan boilerplate ini. Ini memiliki struktur yang sangat bagus dan sekarang saya menggunakannya di setiap proyek.

/components
/layouts
/mixins
/pages
/routes
/services
/store
/transformers

Dia juga menjelaskan strukturnya dengan sangat baik. https://github.com/petervmeijgaard/vue-2.0-boilerplate#structure

person Berni    schedule 21.08.2017