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

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

  • 于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/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地址:

  • 基于cli3的集成vuex,element/antd/mint的单/多页面脚手架 地址:https://github.com/MrXujiang/vue_muti_cli
  • 基于webpack3打包单页多页应用 地址:https://github.com/MrXujiang/webpack3_reac
  • gulp4打包多页面应用 地址:https://github.com/MrXujiang/gulp4_multi_pages

更多推荐

如何用不到200行代码写一款属于自己的js类库)

让你瞬间提高工作效率的常用js函数汇总(持续更新)

一张图教你快速玩转vue-cli3

3分钟教你用原生js实现具有进度监听的文件上传预览组件

使用Angular8和百度地图api开发《旅游清单》

js基本搜索算法实现与170万条数据下的性能测试

《前端算法系列》如何让前端代码速度提高60倍

vue高级进阶系列——用typescript玩转vue和vuex

回复 学习路径,将获取笔者多年从业经验的前端学习路径的思维导图

趣谈前端

Vue、React、小程序、Node

前端 算法|性能|架构|安全

本文分享自微信公众号 - 趣谈前端(beautifulFront)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏京程一灯

用 ref 访问 Vue.js 程序中的 DOM[每日前端夜话0x9C]

本文适用于所有使用 Vue 的开发人, 包括初学者。在阅读本文之前,你应该具备一些前提条件:

8820
来自专栏Node开发

Vue博客实战---前后端环境搭建

最近心血来潮在开发个人博客网站,刚好可以趁这个机会出一个系列文章讲讲前端界面的设计,后端业务逻辑的实现以及前后端的交互。具体的架构我是采用Vu...

24410
来自专栏从零开始学 Web 前端

vue获取后端数据放在created还是mounted方法里面?

我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染。那么放在created里...

72530
来自专栏萝卜大杂烩

Vue + Flask 小知识(四)

首先有一个简单的表单,一个必填的输入框,一个 textarea 类型输入框,还有两个多选的下拉框 页面效果如下:

7220
来自专栏front-end technology

​vue源码分析前置知识必备

最近利用空闲时间又翻看了一遍Vue的源码,只不过这次不同的是看了Flow版本的源码。说来惭愧,最早看的第一遍时对Flow不了解,因此阅读的是打包之后的vue文件...

15250
来自专栏前端自习课

【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践

然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...…真香!

49650
来自专栏萝卜大杂烩

Vue + Flask 小知识(五)

认证:判定用户的合法性,一般是判断是否已经登陆 鉴权:判断用户的权限,一般是判断用户是否可以继续继续某个操作

14620
来自专栏前端小吉米

微信开放文档是个病,得治!

以前,微信开放文档是使用文档界的老大哥— gitbook。用它搭建文档其实并不需要耗费多长时间,主要在于界面维护和自定义主题。Jquery 则是里面主要用来做前...

13920
来自专栏从零开始学 Web 前端

前端路由的实现原理

路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。

21130
来自专栏front-end technology

​轻松掌握vuex,让你对状态管理有一个更深的理解

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

17640

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励