前端開源實戰項目推薦

前言

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

RN寫的餓了么,還原度相當高,實現了各類動效