前端開源實戰項目推薦

前言

這段時間一直有學員和一些正在從事前端開發工做的朋友詢問「有沒有推薦的前端開源項目？」，由於一直忙於工做沒有時間去整理，今天應各位的請求，我整理了一些開源項目 。推薦順序與項目的好壞無關，框架的推薦順序就你們詢問的比例來分，跟當前市場框架的佔有率無關，因此你們不要先入爲主的認爲我列在前面的可能就是好的。話很少說，咱們進入正題。

Vue.js

Vue Element Admin

vue-element-admin 是一個後臺前端解決方案，它是基於 element-ui 實現的。

​

項目地址：vue-element-admin

項目效果查看：vue-element-admin-dashboard

Iview Admin

iview-admin 是一個基於 iView 的 Vue 2.0 管理系統模板

​

項目地址：iview-admin

Vue2 Manage

vue2-manage 是基於 vue + element-ui 的後臺管理系統

​

項目地址：vue2-manage

項目有臺管理系統效果查看：back-manage

項目前端手機模擬預覽：elm-manage

Vue Manage System

vue-manage-system 是基於 Vue.js + Element UI 的後臺管理系統解決方案

vue-manage-system 登陸界面

​

vue-manage-system 首頁( 默認皮膚 )

​

vue-manage-system 首頁( 淺綠色皮膚 )

​

項目地址：vue-manage-system

Vue Music Webapp

vue-music-webapp 是基於 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發一款移動端音樂 WebApp 項目

vue-music-webapp 推薦、排行和歌手頁

​

​

​

vue-music-webapp 播放和播放列表頁

​

​

項目地址：vue-music-webapp

Litemall

litemall 是基於 Spring Boot 後端 + Vue 管理員前端 + 微信小程序用戶前端 + Vue 用戶移動端 開發的項目

litemall 登陸頁

​

litemall 首頁

​

項目地址：litemall

Blog Vue Typescript

blog-vue-typescript 是基於 Vue + TypeScript + Element-Ui 支持 markdown 渲染的博客前臺展現項目

blog-vue-typescript PC 端效果圖

​

blog-vue-typescript 移動端效果圖

​

項目地址：blog-vue-typescript

Netease Cloud WebApp

netease-clound-webapps 是基於傳說中的VUE全家桶(vue vue-router vuex)、axios、Muse-UI(一個基於Vue2.x的material design 風格UI框架)，高仿網易雲音樂的 webapp，只實現了 APP 的核心功能。

netease-clound-webapps 效果圖

​

​

​

​

項目地址：netease-clound-webapps

React.js

Antd Admin

antd-admin 是基於 React + Ant Design 開發的一套優秀的中後臺前端解決方案。

antd-admin 登陸頁

​

antd-admin 首頁

​

項目地址：antd-admin

Iease Music

ieaseMusic 是基於 Electron, React, MobX, JSS 開發的網易雲音樂第三方項目

​

項目地址：ieaseMusic

React pxq

react-pxq 是基於 react + redux + webpack + react-router + ES6/7/8 + immutable 開發的完整項目和我的總結

react-pxq 效果預覽

​

​

​

​

項目地址：react-pxq

React Admin

react-admin 是基於 Create React App 建立的 react 後臺管理系統解決方案

​

​

​

​

項目地址：react-admin

GitHubPopular

GitHubPopular 是一個用來查看GitHub最受歡迎與最熱項目的App,它基於React Native支持Android和iOS雙平臺。

GitHubPopular 項目預覽圖

​

​

​

項目地址：GitHubPopular

Elm React Native

elm-react-native 是一個基於 RN 寫的餓了麼，還原度至關高，實現了各種動效。效果圖以下：

​

​

​

​

​

​

​

項目地址：elm-react-native

ZhiHuDaily React Native

ZhiHuDaily-React-Native 基於React Native 開發，可以運行到 Android 和 IOS 端的仿知乎日報的項目。

ZhiHuDaily-React-Native 預覽效果

​

​

​

項目地址：ZhiHuDaily-React-Native

Shopping React Native

shopping-react-native 基於js+Reactjs+React-Native 的一個商城類的RN 項目，效果圖以下：

​

​

​

​

項目地址：shopping-react-native

Blog React

此 blog 項目是基於 react 全家桶 + Ant Design 開發的支持 markdown 的博客前臺展現。

PC 端效果以下

​

​

移動端

​

項目地址：blog-react

Blog React Admin

blog-react-admin項目是基於螞蟻金服開源的 ant design pro 之上，用 react 全家桶 + Ant Design 的進行再次開發的。效果圖以下：

​

項目地址：blog-react-admin

React Blog

react-blog 是基於 react hooks + koa2 + sequelize + mysql 搭建的先後臺的博客。效果以下圖;

PC 端

​

移動端

​

項目地址：react-blog

Blog React

blog-react 是基於 typescript+koa2+react 的我的博客，效果圖以下：

管理端截圖

​

項目地址：blog-react

Angular

Angular News

Angular-news 是基於angular.js,weui和node.js重寫的新聞客戶端。

項目地址：Angular-news

Ngx Admin

ngx-admin 管理儀表板模板基於Angular 7+，Bootstrap 4

​

項目地址：ngx-admin

Node.js

Node Elm

node-elm 是基於 node.js + Mongodb 構建的後臺系統

前端效果

​

後臺管理系統

​

項目地址：node-elm

Node Club

nodeclub 是使用 Node.js 和 MongoDB 開發的社區系統

項目地址：nodeclub

Nideshop Mini Program

nideshop-mini-program 是基於 Node.js+MySQL 開發的開源微信小程序商城（微信小程序）。

​

​

​

​

​

​

​

項目地址：nideshop-mini-program

Nideshop

NideShop 開源微信小程序商城服務端 API（Node.js + ThinkJS）

項目地址：NideShop

wemall

wemall 基於react, node.js, go開發的微商城（含微信小程序）

​

項目地址：wemall

React Express Blog Demo

React-Express-Blog-Demo 是基於 React+Express+Mongo 開發的先後端博客網站

項目地址：React-Express-Blog-Demo

Blog Node

blog-node 是基於 node + express + mongodb 的博客網站後臺

​

​

項目地址：blog-node

做者：ken.io
連接： 前端開源實戰項目推薦 來源：github