最近VueJs确实火了一把，自从Vue2.0发布后，Vue就成了前端领域的热门话题，github也突破了三万的star，那么对于新手来说，如何高效快速的学习Vue2.0呢。既然大家会看这篇文章，那么肯定是vue的学习者了，或是遇到的瓶颈，或者刚刚开始学，不知道如何快速起步，本篇文章将带领大家在最短的时间内构件一个学习Vue的学习路线Vuejs的作者尤雨溪尤大也写过一篇关于新手学习vue路径的文章新手向：Vue 2.0 的建议学习顺序百度vuejs搜索的是vue1的文档，推荐大家直接上2.0,毕竟1和2还是有区别的。vue2.0文档地址Vue2.0Vue基础对于没有接触过es6和webpack的童鞋来说，不建议直接用官方的脚手架vue-cli构件项目。先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令和语法。vue的生命周期很重要，了解这点以后可以免去很多问题。学完这些可以做一些练手的小项目，比如万年不变的todolist。。。现在可以开始学习使用vue-cli构件项目了，学习组件化之前，推荐先看一下es6关于模块的介绍。阮一峰《ECMAScript6》 Module光会这些还是不够的，还得会一些npm基础，知道如何用git-bash来安装依赖，会一些常用的命令。这方面的知识可以参阅npm入门文档看完这些就可以试着将之前的写的demo用搭建的vue-cli来实现。附上我写的一个入门小demovue-demo-search多看看组件那里，看看如何在vue-cli中怎么实现组件化，说白了，vue玩的就是组件。到这里vue基础篇就结束了。你还可以有条件的参阅剩下的官方文档里面的进阶篇，如果时间有限，就直接进入vue-router Vue-router和之前一样，推荐直接用html+js过一遍文档对路由导航钩子得好好看一看。看完文档就可以上手vue-cli，一般新手在这几天都会死活跑不出来。偷笑最直接的方法就是去github上搜一些关于vue-router2.0的demo，看如何构件路由，如何构件项目目录。我这里有一个传送门如果能跑出来，就可以做一些小项目了，比如写一个知乎日报啊偷笑，这些demo在github上很多。可以结合一些组件库写demo，这样可以更加了解组件化。比如饿了么团队的Element、mint-ui Vuex什么是vuex？Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。说白了就是控制应用的一些全局状态。状态改变了，对应的视图也会改变。在学习Vuex时，会有一些ES6特性，当遇到这些时，最好不要一带而过，去好好看一看这些es6特性。比如在学习Action时可以看看ES6新增的Promise和参数解构。实践的方法一样是先看别人别人写的代码，比如官方的购物车实例的应用结构。把之前写的demo优化一下，有些地方可以用用vuex。vuex主要是用来对不同组件间进行通信，它构建了一个Vue实例的全局数据与方法，这些数据与方法可以在该Vue实例的所有组件中getter与setter。
旨在让开发者在开发时拥有
的一条龙服务。(接下来，我们携手...)
假设 项目经理提了个 需求 ：要开发一个组件，名叫 chaste-component。
准备工作
准备工作完毕
打包
默认使用package.json的name打包
构建出了预发布文件
只需关注src文件内的组件开发，开发完成就可以
发布组件了（有特殊需求配置的除外）
运行
监听src文件变动，热更新
新开一个终端
运行在8080端口， 打开 http://localhost:8080
Home 页面
上手 页面
页面基础内容也是自动生成的，只需要对docs-src/views文件的组件示例做调整
支持eslint风格检查及自动格式化，在 ctrl+s 保存的时候自动格式化，没用过格式化的都说直接 飞起来了
eslint风格检查
需要插件 eslint、babel-eslint、eslint-plugin-vue 及配置文件 .eslintrc.js 的支持，这些都已经做好了
自动格式化
需要编辑器设置的支持，这里在 .vscode/settings.json 文件配置好了
2019年11月github正式开放了github-actions，感动！
这里我们只介绍怎么用她完成demo自动构建，想要更多了解的可以看看阮一峰老师的这篇文章 GitHub Actions 入门教程
添加密钥并提交项目
然后提交项目到chaste-component仓库
github pages
设置source为gh-pages分支
打开 https://blryli.github.io/chaste-component/ ，就进入了demo页面
之后 chaste-component 项目的每次提交都回自动更新demo
已配置的 workflows/ci.yml 如下
下一篇博客将分享 vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（搭建篇）
github地址 （觉得有帮助，欢迎star）
