基于react/vue生态的前端集成解决方案探索与总结

时间 2019-11-05

标签基于 react vue 生态前端集成解决方案探索总结栏目 React 繁體版

原文原文链接

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

基于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项目中不可忽视的自动化部署方案css

正文

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

设计思路

2. 项目架构

启动截图

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

设计思路

2. 项目架构

启动截图

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

设计思路

2. 项目架构

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

#!/bin/bash
echo "请选择技术方案 vue or react or gulp"
read name
if [ $name == 'vue' ]
then
   git clone git@github.com:MrXujiang/vue_muti_cli.git
elif [ $name == 'react' ]
then
   git clone git@github.com:MrXujiang/webpack3_react.git
elif [ $name == 'gulp' ]
then
   git clone git@github.com:MrXujiang/gulp4_multi_pages.git
else
   echo "输入不合法"
fi
复制代码

此时咱们能够使用以下命令安装你想要的集成方案：前端

github地址：

更多推荐

欢迎关注下方公众号，获取更多前端知识精粹和学习社群： vue

在公众号点击进群，能够加入vue学习小组，一块儿学习前端技术；

回复学习路径，将获取笔者多年从业经验的前端学习路径的思惟导图；react

交流微信群：jquery