Структурирование приложения Vue

В настоящее время я пытаюсь создать свое первое веб-приложение, используя vue.js

Теперь, когда я изучал 2 дня обучения, я все еще не уверен на 100%, как структурировать базовое приложение. Использование vue-cli и webpack уже создает хорошую структуру, включая папку / src с компонентами и папку / router для маршрутизации.

Теперь я планирую создать приложение ToDo. Я хочу динамически переключаться между [показать задачи] и [добавить задачу], что представляет собой просто форму с кнопкой отправки. Я уже добился этого, используя его без компонентов и cli.

Моя структура была бы такой:

App.vue - ›кнопки с двумя router-link к компонентам / ShowTodos.vue и компонентам / AddTodos.vue

components / ShowTodos.vue - ›Таблица со списком задач.

components / AddTodos.vue - ›Форма с кнопкой отправки

Теперь часть маршрутизации работает, я могу переключаться между этими двумя компонентами.

Теперь 2 вопроса:

  1. Как я могу протолкнуть информацию из формы в компоненте AddTodos в массив в компоненте ShowTodos, чтобы просмотреть его в цикле?

  2. Это правильный способ структурировать приложение vue, и если нет, как его улучшить?

    Большое тебе спасибо.

Я впервые использую компонентную JS Framework, поэтому мне довольно сложно следовать за ней.

введите описание изображения здесь


javascript vue.js vue-router vuejs2 vue-component
person miaue    schedule 20.08.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

При структурировании вашего приложения vuejs это может быть полезно

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

Что касается второго вопроса, я провел несколько исследований и рекомендую:

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

Подробнее читайте здесь: https://medium.com/@sandoche/how-to-structure-a-vue-js-project-eabe75161882

person Sandoche    schedule 12.06.2018

arrow_upward
0
arrow_downward

Я могу порекомендовать этот шаблон. У него очень хорошая структура, и теперь я использую ее в каждом проекте.

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

Он также очень хорошо объясняет структуру. https://github.com/petervmeijgaard/vue-2.0-boilerplate#structure

person Berni    schedule 21.08.2017