写点什么

vue 自从使用了组件,工作量减去了一半

作者:CRMEB
  • 2022 年 5 月 11 日
  • 本文字数:820 字

    阅读完需:约 3 分钟

vue 自从使用了组件,工作量减去了一半

知识付费使用 script 标签引入 Vue.js。在项目中也可以使用组件,完成一些公共业务。以 H5 登录弹窗为例,对在知识付费中使用组件进行说明。

登录弹窗会在多个业务场景下使用,如果在每个业务场景下重复一套登录弹窗,会使得代码冗余,且后期维护较为繁琐。此时,我们可以将登陆业务的代码剥离出来,在需要对其使用的地方进行引入即可。这样做不仅精简代码,而且在后期维护时也更加容易,不必再为新的功能需求,在多处进行代码改动。

在当前项目下,有两种剥离方式。一种方式是将登录业务代码写在独立的 JavaScript 文件中,其中的 DOM 片段需要进行字符串拼接;另一种方式是使用插件,将写有 DOM 片段的 HTML 文件、JavaScript 文件、CSS 文件进行组合。

  • 拼接字符串方式:

在早期项目中,使用的就是这种方式。



如上图所示,图中的模板内容使用字符串拼接而成。这种方式拼接字符串一旦超多,会显得代码很乱,且易出错。

  • 组合方式:

项目使用 RequireJS 进行模块化开发,所以我们可以使用 text.js 和 css.js 插件,引入 HTML 和 CSS。



如上图所示,我们将登录组件的 HTML、CSS 和 JavaScript 文件放在 base_login 文件夹下。



如上图所示,base_login 文件夹下的文件。



如上图所示,这是 index.html 中的内容。



如上图所示,这是 index.css 中的内容。



如上图所示,这是 index.js 中的内容,其中引入 index.html 和 index.css 文件。



如上图所示,在页面中使用登录组件,先引入,再使用。



如上图所示,这是组件的使用。

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27提取码: yu27
复制代码

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

码云地址:http://github.crmeb.net/u/defu

Github 地址:http://github.crmeb.net/u/defu

开源不易,Star 以表尊重,感兴趣的朋友欢迎 Star,提交 PR,一起维护开源项目,造福更多人!

用户头像

CRMEB

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
vue 自从使用了组件,工作量减去了一半_CRMEB_InfoQ写作社区