对于 vuejs、reactjs 这类组件化的前端框架，在设计布局的时候是先写好 html 再进行组件拆分还是边写 js 边写 html？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2845 天前的主题，其中的信息可能已经有所发展或是发生改变。

特别是对于类似于管理后台这些布局比较复杂的。

以前也是普通的 html ＋ css ＋ js 写惯了，突然改用 reactjs/vuejs 的开发方式一下就手足无措了。。。

8 条回复 • 2016-07-19 19:07:16 +08:00

Mirachael

2016-07-19 17:22:34 +08:00

肯定是先拆再写啊，只要不是太复杂，都能先拆个大概。

broadliyn

2016-07-19 17:41:57 +08:00

@mojixiang1102 意思就是说先写好局部的小组件，然后最后再用一个 layout 把各个部分组合在一起么？

learnshare

2016-07-19 17:51:17 +08:00

先完成 UI （ HTML/CSS ）部分，然后封装组件（ JS ），最后再组装，写业务逻辑。

shui14

2016-07-19 17:57:49 +08:00

为了组件而组件

sokis

2016-07-19 18:00:46 +08:00

一般的项目，组件化不用太极致。很多情况下，我们前端现在做的组件化，跟以往后端套模版类似。都是先做好 HTML+CSS 然后再根据需求拆分。一些公用的功能性组件，可以在设计阶段，预先定义好。

loading

2016-07-19 18:31:44 +08:00 via Android

你想一次成型？

我认为用来重构最合适！

hxsf

2016-07-19 19:07:09 +08:00

个人观点：

1. 设计 /规划时，确定会多次用到的，

2. 编码 /重构阶段，多次用到的。

3. 大组件为了易于维护而拆分的。

以上情况，封装成组件。

jiyinyiyong

2016-07-19 19:07:16 +08:00

写得多了, 大体结构是知道的. 比如说 React 里哪些地方需要组件局部状态, 哪些地方组件多个地方复用, 哪里组件结构过于复杂, 这些都是提前能知道的, 直接拆分到独立的组件. Vue 可能不大一样, 双向绑定对组件的独立性倒是不那么强调. 不过再有经验也很难在代码写出来之前能在脑子里全脑补出来, 总是会发现需要拆.