Vue App结构化

Question

我目前正在尝试使用vue.js构建我的第一个webapp

现在有2天的深度教程，我仍然不能100％确定如何构建基本应用程序。 使用vue-cli和webpack已经形成了一个很好的结构，包括带有组件的/ src文件夹和用于路由的/ router文件夹。

现在我的计划是创建一个ToDo应用程序。我想在[show todos]和[add todo]之间动态切换，这只是一个带有提交按钮的表单。 我已经通过使用它而没有组件和cli来实现它。

我的结构将是：

App.vue - ＆gt;具有两个router-link到组件/ ShowTodos.vue＆amp;的按钮components / AddTodos.vue

components / ShowTodos.vue - ＆gt;表格包括待办事项列表

components / AddTodos.vue - ＆gt;表单提交按钮

现在路由部分工作，我可以在这两个组件之间切换。

现在有两个问题：

1. 如何将AddTodos组件中表单中的信息推送到ShowTodos组件中的数组中，以便在那里循环？

2. 这是构建vue应用程序的正确方法，如果不是，我该如何改进它？

   非常感谢。

这是我第一次使用基于组件的JS Framework，所以很难跟上它。

Answer 1

关于第二个问题，我做了一些研究，这就是我的建议：

.
├── 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

Answer 2

在构建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

Answer 3

我可以推荐这个boilerplate。它有一个非常好的结构，我现在在每个项目中使用它。

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

他也很好地解释了结构。 https://github.com/petervmeijgaard/vue-2.0-boilerplate#structure