绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
基于react/vue生态的前端集成解决方案探索与总结
2020-07-16 15:29:01


本文主要总结了笔者在多年前端工作中的技术方案选型,结合各种不同类型的项目,搭建了一套完整的前端集成解决方案,主要包含如下内容:

  • 于vue-cli3搭建的vue+vue-router+vuex+elementUI/antd/mint+stylus/less/scss的单/多页项目

  • 基于webpack搭建的react+react-router+redux+redux-thunk+immutable+keymirror+antd的单/多页项目(兼容ie9+)

  • 基于gulp4.0搭建的原生js/jquery+less/scss传统解决方案

接下来我将介绍项目的基本架构和设计思路,并使用shell脚本来实现自动化安装技术集成方案。最后会在文章的末尾附上github地址,感兴趣的朋友可以研究参考,也可直接使用。如果还不了解shell,可以看我的上一篇文章vue/react项目中不可忽视的自动化部署方案

正文

1. vue集成方案——vue+vue-router+vuex+elementUI/antd/mint+stylus/less/scs

  1. 设计思路

2. 项目架构
  1. 启动截图

2.react集成方案——react+react-router+redux+redux-thunk+immutable+keymirror+antd

  1. 设计思路


2. 项目架构
  1. 启动截图

3.原生js/jquery集成方案——基于gulp4.0搭建的原生js/jquery+less/scss传统解决方案

  1. 设计思路


2. 项目架构

使用shell脚本来实现自动化安装技术集成方案

#!/bin/bashecho "请选择技术方案 vue or react or gulp"read nameif [ $name == 'vue' ]then   git clone git@github.com:MrXujiang/vue_muti_cli.gitelif [ $name == 'react' ]then   git clone git@github.com:MrXujiang/webpack3_react.gitelif [ $name == 'gulp' ]then   git clone git@github.com:MrXujiang/gulp4_multi_pages.gitelse   echo "输入不合法"fi

此时我们可以使用如下命令安装你想要的集成方案:

分享好友

分享这个小栈给你的朋友们,一起进步吧。

趣谈前端
创建时间:2020-07-15 17:32:01
一个重度代码洁癖者,有对前端生态的总结,思考和探索。内容涵盖了笔者多年对vue,react,node,webpack以及javascript框架设计的探索和经验。公众号 - 趣谈前端
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

栈主、嘉宾

查看更多
  • xujiang
    栈主

小栈成员

查看更多
  • ☀️
  • victoria_ltt
戳我,来吐槽~