组件化, 也叫模块化. Vue 中的组件字面意思是指页面的组件化开发, 但是实际开发中, 我们在网络层, 路由层, 还有业务层, 也是需要模块化的设计开发。
一、为什么要组件化开发?
组件化开的的好处是结构清晰, 后期修改调整维护容易。
二、要怎么做组件化开发
1. 按功能或页面来划分
我们可以先从项目模块结构开始做模块的划分, 按功能或页面来划分, 比如: 用户系统、主页、 我的等等.
2. 路由模块化
划分好模块后, 我们就开始从路由入手, 按划分好的模块, 对路由进行同样的划分, 以后每增加一个功能模块, 路由就增加一个模块.
3. 页面模块化(组件化)
-
页面级别的组件。
-
业务上可复用的基础组件。
-
与业务无关的独立组件。
在这里, 我们要对页面进行拆分, 看那些是每个页面都是有的 (导航栏, 页角等), 还有一些是可以几个页面都分用到, 要复用的组件, 或者独立的组件. 还有一些基础组件, 要用到相同的样式 (Button, Alert 等),
在动手编写代码之前, 最好想清楚了在动手, 免得后期回来重写.
组件之前的数据通信也是重点, 页面级的组件与子组件, 兄弟组件之间的数据, 网络的请求, 业务的逻辑处理, 要放在那里, 都要想清楚.
我的建设是, 如果子组件相对独立, 数据的网络请求与其他组件没有关联, 那么可以放在子组件里处理, 反子, 最好放在父组件里处理. 子组件只做数据接收与展示. 另外, 也可以用 store 的全局状态 state 与 action 来处理数据的中转.这样业务逻辑更加清晰.
4. 网络请求的封装
-
封装网络工具类
-
API 请求按模块划分
-
Store 的 action 作数据请求
网络工具类的封装, 我们可以统一处理状态的, 或不同错误的拦截等. 还可以做 token 验证等.
API 请求, 业务逻辑处理, 参数都要统一写在不同的 API 模块里面, 这样在以后维护的时候才容易处理. UI 层与业务逻辑层分开.
最后是, Store 如果有用到全局状态管理, action 可以为网络请求的入口调用. 在这里面统一调用 API, UI 层调用 action
5. Main.js
这是个入口文件, 这里并没有模块化的处理. 不过这里一些设置很重要, 比如全局的引用等. 要活用这个入口文件.
Vue.prototype.$api = api;
评论