快速学习Vue详细计划

 

前端学习路线

1、HTML+CSS+JS
https://www.bilibili.com/video/BV1p84y1P7Z5/?spm_id_from=333.999.0.0
菜鸟教程:
https://www.runoob.com/
w3cschool:
https://www.w3cschool.cn/tutorial

HTML 编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：

VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/
在线编辑器：https://c.runoob.com/front-end/61/

HTML/CSS/JS 在线工具
可以在线编辑 HTML、CSS、JS 代码，并实时查看效果，你也可以将优质代码保存分享：https://c.runoob.com/front-end/61
CSS3 实例
https://www.runoob.com/try/try.php?filename=trycss3_transform_rotate

 

2、vue学习路线（微信小程序与vue框架的很相似） html5 框架
vue（微信小程序语法很相似）、react (排名第二重要的框架),Angularjs
https://www.bilibili.com/video/BV1Gm4y1b7vw/?spm_id_from=333.999.0.0&vd_source=0f7d557302227d1a05314c68aa7b7c23
前端学习路径 https://www.bilibili.com/read/cv5650633

3、找个项目看下(实战项目)
https://www.bilibili.com/video/BV1Xh411V7b5/?spm_id_from=333.999.0.0&vd_source=0f7d557302227d1a05314c68aa7b7c23
github.com:
Vue.js Examples：https://github.com/vuejs/vuejs.org/tree/master/src/v2/examples
Vue官方提供的示例代码，包含了各种常见的用法和功能示例。

Vue Element Admin：https://github.com/PanJiaChen/vue-element-admin
基于Vue和Element UI的后台管理系统模板，包含了丰富的功能和组件示例。

Vue Hackernews：https://github.com/vuejs/vue-hackernews-2.0
Vue官方提供的Hacker News的示例项目，展示了Vue的基本用法和开发模式。

Vue Shopping Cart：https://github.com/ittus/vue-shopping-cart
一个简单的购物车示例项目，展示了Vue的组件化开发和状态管理。

Vue Weather App：https://github.com/sdras/vue-weather-app
一个天气应用的示例项目，展示了Vue的数据请求和展示。

Vue TodoMVC：https://github.com/vuejs/vue/tree/dev/examples/todomvc
Vue官方提供的TodoMVC的示例项目，展示了Vue的组件化和状态管理。

https://github.com/bailicangdu/vue2-happyfri
非常简单的一个vue2 + vuex的项目，整个流程一目了然，麻雀虽小，五脏俱全，适合作为入门练习

 

https://github.com/ygs-code/vue
Vue源码注释和流程图 （非必要看的，可以后面有时间深入研究看看）

https://github.com/bailicangdu/vue2-elm
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用，一个 vue2 比较复杂的大型项目，覆盖了vuejs大部分的知识点

基于vue + element-ui的后台管理系统
https://github.com/bailicangdu/vue2-manage

 

gitee.com:

https://gitee.com/mindskip/xzs-mysql
一款 java + vue 的前后端分离的考试系统

https://gitee.com/macrozheng/mall
一套基于 SpringBoot + Vue + uni-app(移动端前端框架) 实现的电商系统

 

4、面试题 
https://blog.csdn.net/xm1037782843/article/details/88225104
https://blog.csdn.net
https://www.jianshu.com/p/bd52907b0e66
https://www.cnblogs.com/wenshaochang123/p/14888494.html
https://blog.csdn.net/m0_67081826/article/details/131720311

刷面试题牛客网：
https://www.nowcoder.com/exam/company?currentTab=recommand&jobId=100&keyword=%E5%89%8D%E7%AB%AF&selectStatus=0

 

5、看一些前端面试实录
https://www.bilibili.com/video/BV1Th411G7iN/?spm_id_from=333.337.search-card.all.click
https://www.bilibili.com/video/BV1K54y1f7ez/?spm_id_from=333.337.search-card.all.click
https://www.bilibili.com/video/BV15Z4y127AF/?spm_id_from=333.337.search-card.all.click

 

 

学习Vue前端技术需要一定的时间和实践，以下是一个快速学习Vue的详细计划：

阶段一：基础知识准备
1. 学习HTML、CSS和JavaScript的基础知识，包括标签、样式、DOM操作等。
2. 了解前端开发工具，如代码编辑器（VS Code）、版本控制工具（Git）等。

阶段二：Vue基础
1. 学习Vue的核心概念，包括Vue实例、组件、指令、计算属性等。
2. 完成Vue官方文档的教程，掌握Vue的基本用法和常用API。
3. 练习使用Vue创建简单的交互式页面，包括数据绑定、事件处理、列表渲染等。

阶段三：Vue进阶
1. 学习Vue的高级特性，如路由（Vue Router）、状态管理（Vuex）等。
2. 学习Vue的组件化开发，掌握组件的创建、通信和复用。
3. 实践使用Vue开发复杂的单页面应用（SPA），包括路由导航、数据管理等。

阶段四：项目实践
1. 找一个小型项目或练习项目，使用Vue进行开发。
2. 学习如何使用Vue与后端API进行数据交互，如使用Axios发送HTTP请求。
3. 学习前端工程化相关的知识，如模块打包工具（Webpack）、代码规范（ESLint）等。

阶段五：进一步学习
1. 学习Vue的生态系统，如Vue插件、UI框架（Element UI、Vuetify等）等。
2. 探索Vue的最新特性和更新，保持对Vue生态的关注。
3. 参与Vue社区，如参加Vue的线上活动、加入Vue相关的论坛和社交媒体群组等。

在整个学习过程中，建议结合实践项目和练习，通过动手实践来加深对Vue的理解和掌握。同时，阅读官方文档、查阅相关教程和博客，参与社区讨论等也是提升学习效果的重要途径。

记住，学习是一个持续的过程，不断实践和探索将帮助你不断进步。祝你学习Vue的过程顺利！

当学习Vue前端技术时，以下是一些学习资源的推荐：

网站和文档：
1. Vue官方文档：https://vuejs.org/
2. Vue Router官方文档：https://router.vuejs.org/
3. Vuex官方文档：https://vuex.vuejs.org/
4. Vue CLI官方文档：https://cli.vuejs.org/
5. Vue Mastery：https://www.vuemastery.com/ （提供免费和付费的Vue视频教程）
6. Vue School：https://vueschool.io/ （提供付费的Vue视频教程）
7. Vue.js Developers：https://vuejsdevelopers.com/ （提供Vue相关的教程和文章）

视频教程：
1. Vue.js Crash Course 2021 by Traversy Media: https://www.youtube.com/watch?v=qZXt1Aom3Cs
2. Vue.js 2 Tutorial by The Net Ninja: https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa
3. Vue.js 2 - Getting Started by Academind: https://www.youtube.com/watch?v=FXpIoQ_rT_c
4. Vue.js 2 - Complete Guide by Maximilian Schwarzmüller: https://www.udemy.com/course/vuejs-2-the-complete-guide/

博客和文章：
1. Vue.js Guide: https://vuejs.org/v2/guide/
2. Vue.js Handbook: https://www.freecodecamp.org/news/the-vue-handbook-a-thorough-introduction-to-vue-js-1e86835d8446/
3. Vue.js Best Practices: https://learnvue.co/vue-js-best-practices/
4. Vue.js Style Guide: https://vuejs.org/v2/style-guide/
5. Vue.js Tips and Tricks: https://vueschool.io/articles/

这些资源将为你提供学习Vue的基础知识、进阶概念、实践项目和最佳实践等方面的指导。记得根据自己的学习进度和需求选择合适的资源，并结合实践进行学习，以加深对Vue的理解和掌握。祝你学习愉快！

 

其他中文资源：
1. Vue官方中文文档：https://cn.vuejs.org/
2. Vue Router官方中文文档：https://router.vuejs.org/zh/
3. Vuex官方中文文档：https://vuex.vuejs.org/zh/
4. Vue CLI官方中文文档：https://cli.vuejs.org/zh/
5. Vue教程 - 廖雪峰的官方网站：https://www.liaoxuefeng.com/wiki/1022910821149312

这些资源将为你提供中文环境下学习Vue的视频教程、官方文档和教程等。在Bilibili上，你可以搜索更多与Vue相关的视频资源，如教程、实战项目等。记得根据自己的学习进度和需求选择合适的资源，并结合实践进行学习，以加深对Vue的理解和掌握。

 

以下是一个前端技术微信小程序开发的学习计划和资源推荐：

1. 学习基础知识：首先需要学习微信小程序的基础知识，包括微信小程序的开发环境、基本框架、组件、API等。可以参考微信小程序官方文档进行学习，文档详细且易懂。

2. 学习实战项目：在学习完基础知识后，可以通过学习实战项目来深入理解微信小程序的开发流程和实际应用。可以在GitHub等代码托管平台上搜索微信小程序的开源项目，例如前面提到的WeChat Mini Program Mall等项目，通过阅读代码、运行项目和尝试修改来加深对微信小程序的理解。

3. 学习进阶知识：在掌握了微信小程序的基础知识和实战经验后，可以学习一些进阶的知识，例如微信小程序的性能优化、数据存储、组件化开发等。可以通过搜索微信小程序的博客、论坛等社区来学习这些进阶知识。

以下是一些微信小程序学习的资源推荐：

1. 微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/index.html

2. 微信小程序开发者社区：https://developers.weixin.qq.com/community/develop/index.html

3. GitHub上的微信小程序开源项目：https://github.com/search?q=wechat+mini+program

4. 微信小程序开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

一些微信小程序开源项目

WeChat Applet Demo：https://github.com/justjavac/awesome-wechat-weapp
一个包含了各种微信小程序示例的仓库，涵盖了不同领域和功能的示例代码。

WeChat Mini Program Mall：https://github.com/EastWorld/wechat-app-mall
一个完整的微信小程序商城项目，包含了商品展示、购物车、订单管理等功能。

WeChat Mini Program Music Player：https://github.com/ClassicOldSong/wechat-mini-program-music-player
一个简单的音乐播放器微信小程序，展示了音乐播放和界面展示的基本功能。

WeChat Mini Program Weather：https://github.com/jrainlau/Weather-MiniProgram
一个天气查询微信小程序，展示了通过API获取天气数据并展示的功能。

WeChat Mini Program Todo List：https://github.com/lin-xin/wx-todo
一个简单的待办事项小程序，展示了数据存储和展示的基本功能。

https://github.com/kezhenxu94/mini-github
github小程序

https://github.com/UxxHans/Rainbow-Cats-Personal-WeChat-MiniProgram
云开发情侣互动小程序（做任务，攒积分，换商品）

https://gitee.com/gz-yami/mall4m
一个基于vue、element ui 的轻量级、前后端分离、拥有完整sku和下单流程的完全开源商城 小程序端

https://gitee.com/gz-yami/mall4m
mall4j商城小程序

https://gitee.com/kesixin/QuestionWechatApp
微信小程序，考试小程序，答题小程序，刷题小程序。毕业设计小程序，有前后端完整源码和数据库，易于二次开发。还可用于考试活动，企业内部考核，内部培训等职业考试刷题。

https://gitee.com/LiangSenCheng/house
Tcb-house云开发租房微信小程序，基于微信小程序云开发-租房微信小程序-带管理员后台

https://gitee.com/weng_xianhu/eymini
易优微信开源小程序