前端開源實戰項目推薦
前言
這段時間一直有學員和一些正在從事前端開發工作的朋友詢問「有沒有推薦的前端開源項目?」,因為一直忙於工作沒有時間去整理,今天應各位的請求,我整理了一些開源項目 。推薦順序與項目的好壞無關,框架的推薦順序就大家詢問的比例來分,跟當前市場框架的佔有率無關,所以大家不要先入為主的認為我列在前面的可能就是好的。話不多說,我們進入正題。
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 效果圖
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 預覽效果
Shopping React Native
shopping-react-native 基於 js+Reactjs+React-Native 的一個商城類的RN 項目,效果圖如下:
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
NideShop 開源微信小程式商城服務端 API(Node.js + ThinkJS)
項目地址:NideShop
wemall
wemall 基於react, node.js, go開發的微商城(含微信小程式)
項目地址:wemall
React Express Blog Demo
React-Express-Blog-Demo 是基於 React+Express+Mongo 開發的前後端部落格網站
Blog Node
blog-node 是基於 node + express + mongodb 的部落格網站後台
項目地址:blog-node