🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ## 前言 通过本篇你将了解到vue的基本知识以及它与其他框架的主要区别,顺便讲解一些vue必备常识。 ## vue与其他框架区别 ## vue学习三步曲 ### vue入门 1. 扎实的js css html基础 2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 `<script>`,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。 3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解 4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数(Render Function)』如果理解吃力可以先跳过。 5. 阅读教程里关于路由和状态管理的章节,然后根据需要学习 vue-router 和 vuex。同样的,先不要管构建工具,以跟着文档里的例子理解用法为主。 6. 基于 Node 的前端工程化 ### node前端工程化 1. es6语法,js模块规范 8. bash基本命令行的使用,建议使用mac 9. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本,并且将 npm 的 registry 注册表配置为淘宝的镜像源 1. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境 1. 学习 Webpack ### vue进阶学习 1. 通过 vue-cli 来搭建基于 Webpack ,并且支持单文件组件的项目了。阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档,了解一些进阶配置。 2. 在 Webpack 模板基础上整合 vue-router 和 vuex 3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节(可选择性使用 JSX),理解模板和渲染函数之间的对应关系,了解其使用方法和适用场景 4. 根据需求,了解服务端渲染的使用(需要配合 Node 服务器开发的知识)。其实更重要的是理解它所解决的问题并搞清楚你是否需要它 5. 阅读开源的 Vue 应用、组件、插件源码,自己尝试编写开源的 Vue 组件、插件 6. 阅读 Vue 的源码,理解内部实现细节 7. 参与 Vue GitHub issue 的定位 -> 贡献 PR ### 参考文档 * 本学习步骤参考:[知乎尤大大文章](https://zhuanlan.zhihu.com/p/23134551)