javascript - Vue 应用程序结构

Question

我目前正在尝试使用 vue.js 构建我的第一个 Web 应用程序

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

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

我的结构是:

App.vue -> 带有两个 router-link 的按钮，分别指向 Components/ShowTodos.vue 和 Components/AddTodos.vue

components/ShowTodos.vue -> 包含待办事项列表的表格

components/AddTodos.vue -> 带有提交按钮的表单

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

现在有 2 个问题:

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

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

   非常感谢。

这是我第一次使用基于组件的 JS 框架，所以很难理解。

Answer 1

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

'