Vue 应用程序结构答案

【问题标题】：Vue App structuringVue 应用程序结构
【发布时间】：2018-01-28 08:55:09
【问题描述】：

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

现在学习了 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 个问题：

如何将 AddTodos 组件中的表单中的信息推送到 ShowTodos 组件中的一个数组中，以便在那里循环？
这是构建 vue 应用程序的正确方法吗？如果不是，我该如何改进它？

非常感谢。

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：