前端開源實戰項目推薦

摘自:https://www.cnblogs.com/xzsj/p/xzsj-front-event.html

前言

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

 

 

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

 

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章