Vue+Webpack+ES6的学习路线建议

顺序如下，本文也会详细的写具体需要学习什么内容。

1. ES6模块化与异步编程高级用法
2. 前端工程化与webpack
3. Vue的基础入门

以上是自学的大方向，下面我们来一个部分一个部分细化学习路线。

一、ES6模块化与异步编程高级用法的学习

需要的内容为：

1. ES6模块化
2. Promise
3. async/await
4. EventLoop
5. 宏任务和微任务
6. API接口案例

应该学到什么程度呢？

• 能够知道如何使用ES6的模块化语法
• 能够知道如何使用Promise解决回调地狱的问题
• 能够知道如何使用async/await简化Promise的调用
• 能够说出什么是EventLoop
• 能够说出宏任务和微任务的执行顺序

二、前端工程化与webpack

需要的内容为：

1. 前端工程化
2. webpack的基本使用
3. webpack中的插件
4. webpack中的loader
5. 打包发布
6. Source Map

应该学到什么程度呢？

小白眼中的前端开发：

• 会写 HTML + CSS + JavaScript 就会前端开发
• 需要美化页面样式，就拽一个 bootstrap 过来
• 需要操作 DOM 或发起 Ajax 请求，再拽一个 jQuery 过来
• 要渲染模板结构，就用 art-template 等模板引擎

实际上的前端开发：

• 模块化（js 的模块化、css 的模块化、其它资源的模块化）
• 组件化（复用现有的 UI 结构、样式、行为）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
• 自动化（自动化构建、自动部署、自动化测试）

自我检验标准：

• 能够说出什么是前端工程化
• 能够说出webpack的作用
• 能够掌握webpack的基本使用
• 了解常用plugin的基本使用
• 了解常用loader的基本使用
• 能够说出Source Map的作用

三、Vue

Vue 3.0 应该怎么学习？

• 1. 掌握 webpack 工程化的开发模式；
• 2. 掌握 Vue 常用的指令；
• 3. 掌握如何使用 vue-cli 快速创建工程化的 Vue 项目；
• 4. 掌握 SFC 单文件组件的各种详细用法；
• 5. 掌握如何实现组件之间的数据共享；
• 6. 掌握 Vue 项目中如何正确配置和使用 axios；
• 7. 掌握自定义指令、过滤器、插槽的使用；
• 8. 掌握 vue-router 的使用；
• 9. 掌握 vue-devtools 调试工具的使用；
• 10. 掌握 ref、动态组件、$nextTick 的使用；
• 11. 掌握 Vant、Element-UI 组件库的使用；
• 12. 能够使用 Vue 实现企业级项目的开发。

换一个角度，如果你已经有前端开发经验了，或者是基础很扎实，你也可以直接在GitHub上找到相关的项目进行学习。

一些相关文档：

地址：cn.vuejs.org

• 这次的工作量非常大，特别感谢中文翻译团队的辛苦贡献！
• 原先的 Vue 2 文档现在迁移到了 v2.cn.vuejs.org
• 之前的临时 v3 文档 (http://v3.cn.vuejs.org) 不再提供，会重定向到最新版对应的 URL
• http://staging-cn.vuejs.org 在一段时间后也会重定向到 http://cn.vuejs.org

目前 http://cn.vuejs.org 依然采用 GitHub + CloudFlare 的部署模式，在国内一些地方的访问速度可能依然不太理想。我们会在近期切换到之前测试过的 Gitee 部署提升国内访问性能。

顺道说明一下：只有 *.http://vuejs.org域名下的文档才是官方文档，官方中文文档的地址是http://cn.vuejs.org。为了确保跟实际最新发布的版本同步，请切记认准官方文档，搜索时留意哦。

学习资源分享：

黑马程序员前端：2022年前端学习路线图https://zhuanlan.zhihu.com/p/450880163

↑↑这里有相关vue2.0+vue3.0全套课程，欢迎大家跟我一起学vue~↑↑

有关项目学习，大家可以戳上面课程链接，里面有4个案例，保证大家听得懂、写得出，能实践。在学习课程案例结束后，还可以自己找到一些项目。

高效学习方法：看课程 → 了解新特性/语法 → 做demo → 无论大小的实战项目 → 看完善项目的源码 → 自己总结学习心得。