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

徐小夕 等级 743 0 0

基于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. 设计思路

基于react/vue生态的前端集成解决方案探索与总结 2. 项目架构 基于react/vue生态的前端集成解决方案探索与总结

  1. 启动截图

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

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

  1. 设计思路

基于react/vue生态的前端集成解决方案探索与总结 2. 项目架构 基于react/vue生态的前端集成解决方案探索与总结

  1. 启动截图

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

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

  1. 设计思路

基于react/vue生态的前端集成解决方案探索与总结 2. 项目架构

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

使用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

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

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

github地址:

更多推荐

收藏
评论区

相关推荐

vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)
前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor
《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件
前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, antdesignvue, iView等成熟的UI框架, react生态的antdesign, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和
Taro 入门教程
简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/
【Flutter实战】状态管理
3.2 状态管理响应式的编程框架中都会有一个永恒的主题——“状态(State)管理”,无论是在React/Vue(两者都是支持响应式编程的Web开发框架)还是Flutter中,他们讨论的问题和解决的思想都是一致的。所以,如果你对React/Vue的状态管理有了解,可以跳过本节。言归正传,我们想一个问题,StatefulWidget的状态应该被谁管理?
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持
VS Code 成主宰、Vue备受热捧!2020 前端开发趋势指南
关注  Vue中文社区 ,回复“ 加群 ” 加入我们一起学习,天天进步 ![](https://oscimg.oschina.net/oscnet/77b386be6377566a8ed7052613c58d1323d.jpg) 来源:CSDN 前端在生产和开发中占据着越来越重要的地位,PC
219. 单页应用 会话管理(session、cookie、jwt)
> 原文链接:[https://github.com/ly525/blog/issues/219](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fly525%2Fblog%2Fissues%2F219) 关键字:`http-only`, `cookie`,`se
219. 单页应用 会话管理(session、cookie、jwt)
> 原文链接:[https://github.com/ly525/blog/issues/219](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fly525%2Fblog%2Fissues%2F219) 关键字:`http-only`, `cookie`,`se
Angular React Vue我应该选择什么?
2017 年比较 Angular、React、Vue 三剑客 ============================== 为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 [Angular](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.juej
React与Vue的相同与不同点
我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。所以要想前端的开发那么必须掌握好这两个框架。 那么这两个框架有什么不同呢? **React 和 Vue 相同之处,它们都有:** * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
React实战之React+Redux实现一个天气预报小项目
![](https://oscimg.oschina.net/oscnet/355a9b3e0af9e3410d9cf918fdfe69b2379.jpg)**引言** ------------------------------------------------------------------------------------ 经过一段时间的Re
React的Sass配置
React提供的脚手架[creact-react-app](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ffacebook.github.io%2Fcreate-react-app%2Fdocs%2Fadding-a-sass-stylesheet)创建的工程文件不像vue那种暴露出web
React面试必问Fiber和Hooks,一次搞定
国内的前端领域,Vue 和 React 是最火的两个框架,要说岗位数量,Vue可能会更多一点。 但如果把公司范围缩小到大厂,或者把范围扩展到全球,那React无疑独占鳌头。 ![](https://oscimg.oschina.net/oscnet/ba57134c-6a7d-47d8-a317-7ad3976a1a77.jpg "2019年
storybook配置之基本配置和webpack配置
#默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其与vue cli的webpack配置非常相似 开始学习Storybook配置 学习内容(Table of Contents) - Babel ES2016+