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

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

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

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

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

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

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

回答:

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

回答:

我已经配好了, ESlint, SASS, AUTOFIXED等等什么的 可以参考 web-style

回答:

demohttps://github.com/TIGERB/eas…

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注