標籤:

vue.js實例項目有木有?

求借鑒下。。。


簡單todo類型應用

演示地址 http://wanteat.coding.io/

hilongjw/vue-vueRouter-webpack-example · GitHub


Vue2.0寫的音樂搜索播放應用

查看在線(在大屏手機上效果最好)vue-music


Github地址Sioxas/vue-music


非常適合新手學習如何上手Vue項目,因為它就是我的第一個Vue項目

Vue重構CnodeJS

Demo: vue

Github: shuiRong/VueCnodeJS

技術棧:
Vue.js
Vue-router(入門很簡單)
Vue-resource(入門很簡單)
Element-UI(入門很簡單)

順便一提,考慮到別人可能會看我源碼來學習Vue,我commit時是根據項目的功能模塊,即每完成一小塊功能,就commit一次。貼心吧,嘻嘻。

Star! Star! Star!


基於vue2.0的網易雲音樂效果

涉及vuex vue-router axios

項目地址: IFmiss/vue-cloud-music

演示地址: 未曾遺忘的青春 . . . 點擊即可查看


基於vue+vue-cli+vue-router+axios+webpack+ scss開發的vue社區SPA,個人通過這個項目學到了很多,如果對您有幫助,請給萌新一個star以資鼓勵,一起加油^ ^

效果演示:http://www.hxvin.me/vue-home/dist/

項目地址:Hxvin/vue-home


  • Vue2_to-do-list

適合學習Vue初學者的第一個項目,內有慕課網教學視頻地址,代碼內我進行了詳細的注釋。

完成後會對Vue有個初步的認識,算是入門級水平。

  • Vue2_ShoppingCart

適合學習Vue的同學們的第二個項目,同樣來自慕課網,代碼同樣進行了詳細注釋。

完成後可以算是Vue學習的初級水平。

  • Vue2_CNode社區

第三個項目(反正我自己就是一樣來的(~ ̄▽ ̄)~ ),項目來自網路,用了Vue-router,axios。

完成後算是初中級水平。


Star 是最好的鼓勵,求 Star ~~~~~~


1、基於vue2 + vue-router + vuex 構建的一個音樂類單頁面應用 —— echo回聲

演示地址:echo回聲

Github地址:echo回聲

2、基於vue2 + vue-router + vuex 構建的一個新聞類大型單頁面應用 —— 今日頭條

演示地址:今日頭條

Github地址:今日頭條

如果對你有幫助,歡迎在Github上 "Star" 支持一下 ^_^


最近學習vue仿寫了一個閱讀器demo,新手應該都能看的懂

項目地址:vue-reader


tgsx/Web_MusicAPP -------這個項目是我自己用vue全家桶將網易雲的部分功能給實現了一遍,已實現的有:歌單推薦,歌單分類選擇,歌手/歌曲/專輯的搜索,音樂的播放,歌詞同步,切換歌曲等,後續功能會逐漸迭代下去,具體效果大家剋參照網易雲音樂APP

本項目所用技術棧:vue-cli+vuex+vue-router+VueAwesomeSwiper,其實也就是vue全家桶。採用的是前後端分離的寫法,一個頁面通常用組件的方式單獨存放,同時可重用的部分會分割出來,這部分目前做的不是很好,導致很多冗餘代碼,後面會想辦法改進(已用mixin改進部分)。歌曲的資源獲取會受到ajax同源策略的限制,所以用的是github上一位大牛提供的music api,原理是用csrf跨域請求偽造和偽造請求頭,調用官方 API,有興趣的可以去觀摩觀摩。

要想把項目運行起來,大家還需要git clone上面這位大佬的代碼,在本地用node跑起來,其實也就是我們整個項目的後端,然後我們前端的工作就是拿到這些數據後想辦法用美觀的方式呈現出來。

有興趣的同學可以一起將它完善,不斷迭代它


慕課上學習了一個精製的音樂播放軟體,使用了vue2.0及vue全家桶。

ZHOUYUANN/vuemusic


基於webpack2 + Vue2搭建的PC端後台運維管理系統腳手架,已集成VUE2全家桶: rootsli/vue2admin


sky技術博客可以參考我的技術博客


Githup

分享一個這幾天做的demo ,高仿 餓了么App

此項目為外賣App核心的商家模塊的SPA

包括商品、評論、商家介紹、購物車等多個子模塊

使用Vuejs全家桶+ES6+Webpack等前端最新最熱的技術

採用模塊化、組件化、工程化的模式開發

star!


https://github.com/surmon-china/surmon.me

vue-components-examplesurmon-china (Surmon)


超級 Miss Vue2.0,Vuex打造WebApp ~ 閱讀文章,聽音樂,看視頻,看美圖

在線地址:Miss

github: linkenliu/MissCloudVue


餓了么點餐系統的Demo,使用vue2.0開發,關於vue的一些基本用法都有用到,並且引入了vuex、vue-router、axios、webpack、eslint、better-scroll等,感興趣可以來看看

https://github.com/SimonZhangITer/VueDemo_Sell_Eleme


windlany/mail_list

一個簡易的通訊錄SPA,用了

vue全家桶、sessionStorage、axios

README文檔有效果展示動圖,很適合新手當做練習小項目,如果你覺得不錯請給我一個star~謝謝支持^_^


模仿qq音樂APP

基於vue2 + vuex + vue-resource + vue-router

在線演示(chrome手機模式查看)

Github地址


kyz1607/biyao_kyz 仿照必要商城首頁!裡面用了vuex vue-router axios我也是個新手,你們應該都能看的懂 適合商城開發 有空會去完善其他頁面


分享一個demo,項目所需要的路由等等,以及封裝的彈窗,tip提示等功能組件。包含項目打包非同步載入優化等。Josncb/vue-tour


推薦閱讀:

vue-cli 該如何正確打包iconfont?
Vue 父組件和子組件怎麼理解?
Angular2 相比 Vue 有什麼優勢?
既然用 virtual dom 可以提高性能,為什麼瀏覽器不直接自帶這個功能呢?

TAG:Vuejs |