基於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
複製代碼