专栏首页趣谈前端基于react/vue生态的前端集成解决方案探索与总结
原创

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

image

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

  • 基于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. 设计思路
image
  1. 项目架构
    image
  2. 启动截图
image

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

  1. 设计思路
image
  1. 项目架构
    image
  2. 启动截图
image

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

  1. 设计思路
image
  1. 项目架构
image

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

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

image

github地址:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (27)打鸡儿教你Vue.js

    当含有index时,以前传递的参数顺序是: (index, value)。现在(value, index)

    达达前端
  • 基于Vue,ElementUI开发的一款表单设计器

    基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来

    程序源代码
  • Vue学习(一)挂载点、模板与实例

    Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,...

    一觉睡到小时候
  • Vue学习(三)属性绑定和双向数据绑定

    一觉睡到小时候
  • 你的idea插件有哪些?来看看这些吧

    idea是开发人员常用的开发工具,而idea上庞大的插件功能更是让人欢喜的不得了。来看下我的idea插件,并推荐几个插件给大家。

    用户1956326
  • (25)打鸡儿教你Vue.js

    达达前端
  • 零基础选择前端技术栈的正确方法

    你的技术栈很明显是以兴趣为导向的。也就是说,你这个技术栈就算你真学完了,对于你工资的提高,也没有很大的帮助,因为它本身就是偏的。

    web前端教室
  • Vue学习(二)数据事件和方法

    例如:v-text(会进行一次转义,相比与v-html), v-html(不会转义)

    一觉睡到小时候
  • (24)打鸡儿教你Vue.js

    1、使用Vue2.0版本实现响应式编程 2、理解Vue编程理念与直接操作Dom的差异 3、Vue常用的基础语法 4、使用Vue编写TodoList功能 ...

    达达前端
  • 零基础怎样自学成为高级前端工程师?

    从根本上来讲,高级前端开发工程师所用的技术和初级、中级前端开发都是一样的,都是使用html、css、js,只不过是在深度和广度上更多一些。同时高级前端的技术栈会...

    web前端教室

扫码关注云+社区

领取腾讯云代金券