如何设计 webpack + vue 模式的架构？

Question

使用webpack + vue搭建一个新系统，主要有这几个问题：

1. 如何区分开发环境与生产环境，不同环境使用不同的常量，并且可以在各个组件的template中直接使用，比如生产环境下的静态服务器地址与开发环境不同，是否是debug模式等。我查到vue有全局的filter和component，没有全局的data，但有个mixin，但官方又不推荐使用

2. 如何定义全局变量，比如用于储存登录状态，用户行为记录等

3. 引用了一个弹出框的组件，但貌似并不能直接访问该组件上的方法，应该通过什么方式与该组件通信，使用broadcast？

第一次搭webpack环境，不知道怎样设计架构比较成熟稳定。

如果大家有这方面丰富的开发经验，也很愿意倾听大家的建议和分享。

Answer 1

早先有将项目改造为webpack + vue模式，也包括使用诸如 Vue-router Vue-loader ... Sass Jade Es6 等工具结合来构建常用 组件，以方便复用代码提升开发效率，这点经验有提交至 vue-common-components。 但近期重新要构建一个新的系统，还是觉得 Vue 官方提供的 vue-cli 更为便捷到位；其他的一楼有了说明，就不赘述了。

Answer 2

第一个问题：用 vue-cli 来 init 项目，提供了成熟的 webpack 配置方案，可以很简单地配置 dev 和 prod 的环境；第二个问题：用 vue 就意味着不再需要支持 ie8 以及以下，可以直接用 localstorage 来存储各种状态，全局变量的话最好再一个地方把变量挂到 window 上，不过不推荐用全局变量；第三个问题：可以用 vuex，或者在顶级组件上左 state 的调配。