vue练手项目地址

本文精选了28个Vue2.0实战项目,涵盖音乐播放器、购物商城、新闻应用等,适合初学者至中高级开发者实践,助力提升Vue技能。

vue练手项目地址

emm,先转载起来,

1:Vue2.0入门项目
https://github.com/SD-Gaming/Vue2.0_to_do_list-addName-

2:慕课网Vue2.0购物车教程(注释版)
https://github.com/SD-Gaming/Vue2.0-ShoppingCart-MOOC

3:初中级项目:CNode社区
https://github.com/SD-Gaming/Vue2.0_CNode.bbs

Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org )预览(DEMO): https://heuristic-stonebraker-33e1b8.…

4:基于vue2.0的网易云音乐播放器,api来自于NeteaseCloudMusicApi,v2.0为最新版本 http://www.daiwei.org/vue-music/

想用vue把我现在的个人网站重新写一下,新的风格,新的技术,什么都是新的
https://github.com/IFmiss/vue-website

5:Vue 音乐搜索、播放 Demo
https://github.com/Sioxas/vue-music/

6:基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声 http://echo.liansixin.win
https://github.com/uncleLian/vue2-echo

7:基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条(移动端) http://toutiao.liansixin.win
https://github.com/uncleLian/vue2-news

8:Xiaomi Mobile Mall. 小米移动商城 http://show.thisummer.com/mi
https://github.com/Jon-Millent/mi-shop

9:仿网易云WebApp,基于vue实现的WebAPP
https://github.com/tgsx/Web_MusicAPP

10:vue+express+socket.io仿微博、微信的聊天社交平台
https://github.com/CBDxin/VueSocial

11:vue2 +vue-router2 + es6 +webpack 高仿饿了么app商家详情,demo:https://www.myblogbo.com/sell
https://github.com/chengengfengC/vue2.x-sell

12:vue+router+vue-cli+webpack
https://github.com/Hacker233/Unstructured-data-processing

13:高仿饿了么App —内附教程
https://github.com/QAQXiYangYang/vue-ele

14:一个精制的音乐播放软件,使用了vue2.0及vue全家桶。
https://github.com/ZHOUYUANN/vuemusic

15:vue2.0阅读器 http://huangshouqi.com/vue-reader.html
https://github.com/huangshouqi/vue-reader

16:基于webpack2 + Vue2搭建的PC端后台运维管理系统脚手架,已集成VUE2全家桶:
https://github.com/rootsli/vue2admin

17:全家桶做了个简单的移动端购物app
https://github.com/OEEO/shoppingApp

18:VUE 后台管理界面案例(mock+express实现前后端分离)
https://github.com/toutouping/vue-web-demo

19:各站点数据整合;图片,视频,文章;在线云音乐播放器;
https://github.com/linkenliu/MissCloudVue

20:饿了么点餐系统
https://github.com/SimonZhangITer/VueDemo_Sell_Eleme

21:vue音乐播放器
https://github.com/LuanMingyang/vue2-music-app

22:基于vuejs+koa2+mysql的高仿饿了么移动APP
https://github.com/The-Never/elm

23:vue全家桶+localStorage实现一个简易的通讯录
https://github.com/windlany/vue-mail-list

24:用vue仿的小米商城
https://github.com/shiyaming1994/mi

25:仿严选商城
https://github.com/wwp123/shopping-yanxuan

26:music webapp
https://github.com/aloneWang/vue-music

27:vue项目(vue全家桶+nodejs) 电商网站
https://github.com/LadyChatterleyLover/mall

28:基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城

https://github.com/huangche007/vue-jd
————————————————
版权声明:本文为优快云博主「祈澈菇凉」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.youkuaiyun.com/qq_36538012/article/details/86625718

### 使用 Vue.js 构建新闻网站项目的练习资源 #### 创建项目结构 为了构建一个基于 Vue.js 的新闻网站,可以利用 `vue-cli` 来初始化项目环境。通过命令行工具安装并配置好开发所需的依赖项[^1]。 ```bash npm install -g @vue/cli vue create news-site-project cd news-site-project ``` #### 设计组件化架构 在现代前端应用中,采用单文件组件 (SFC) 方式来组织代码是一种常见做法。对于新闻网页而言,通常会涉及到如下几个核心模块: - **Header.vue**: 导航栏部分,放置站点Logo以及主要导航链接。 - **ArticleList.vue**: 文章列表展示区,负责渲染来自API的数据。 - **ArticleDetail.vue**: 单篇文章详情页面,用于显示具体的文章内容。 - **Footer.vue**: 页面底部版权信息等内容。 这些组件可以通过路由机制实现动态加载和切换效果。 #### 获取数据源 大多数情况下,真实世界的应用程序都需要同远程服务器交互获取最新资讯。这里推荐使用 Axios 库来进行 HTTP 请求操作: ```javascript import axios from 'axios'; export default { data() { return { articles: [] }; }, methods: { async fetchArticles() { try { const response = await axios.get('https://api.example.com/articles'); this.articles = response.data; } catch (error) { console.error(error); } } }, mounted() { this.fetchArticles(); } } ``` 上述方法会在组件挂载完成后自动调用 API 接口拉取文章列表,并将其保存到本地状态管理器内以便后续视图更新时能够及时反映最新的变化情况。 #### 实现响应式布局 为了让网页能够在不同尺寸屏幕上都有良好的用户体验,应该考虑加入媒体查询规则调整样式表中的属性值。借助于 CSS 预处理器如 Sass 或 Less 可以更方便地编写复杂的样式逻辑。 ```scss // _variables.scss $breakpoint-mobile: 768px; @media only screen and (max-width: $breakpoint-mobile) { .article-item { flex-direction: column; } } ``` 以上就是有关如何运用 Vue.js 开发一款简单的新闻聚合类 Web App 的一些基本指导思路和技术要点介绍。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值