最近VueJs确实火了一把，自从Vue2.0发布后，Vue就成了前端领域的热门话题，github也突破了三万的star，那么对于新手来说，如何高效快速的学习Vue2.0呢。
既然大家会看这篇文章，那么肯定是vue的学习者了，或是遇到的瓶颈，或者刚刚开始学，不知道如何快速起步，本篇文章将带领大家在最短的时间内构件一个学习Vue的学习路线
Vuejs的作者尤雨溪尤大也写过一篇关于新手学习vue路径的文章
百度vuejs搜索的是vue1的文档，推荐大家直接上2.0,毕竟1和2还是有区别的。vue2.0文档地址
对于没有接触过es6和webpack的童鞋来说，不建议直接用官方的脚手架vue-cli构件项目。
先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令，和整个vue实例的基础架构。
vue的生命周期很重要，了解这点以后可以免去很多问题。
学完这些可以做一些练手的小项目，比如万年不变的todolist。。。
现在可以开始学习使用vue-cli构件项目了，学习组件化之前，推荐先看一下es6关于模块的介绍。
光会这些还是不够的，还得会一些npm基础，知道如何用git-bush来安装模块依赖，会一些常用的命令。这方面的知识可以参阅
看完这些就可以试着将之前的写的demo用搭建的vue-cli来实现。附上我写的一个入门小demo
多看看组件那里，看看如何在vue-cli中怎么实现组件化。
到这里vue基础篇就结束了。你还可以有条件的参阅剩下的官方文档里面的进阶篇，如果时间有限，就直接进入vue-router
Vue-router
和之前一样，推荐直接用html+js过一遍文档
对路由导航钩子得好好看一看。
看完文档就可以上手vue-cli，一般新手在这几天都会死活跑不出来。
最直接的方法就是去github上搜一些关于vue-router2.0的demo，看如何构件路由，如何构件项目目录。
我这里有一个
如果能跑出来，就可以做一些小项目了，比如写一个知乎日报啊，这些demo在github上很多。
可以结合一些组件库写demo，这样可以更加了解组件化。比如饿了么团队的、
什么是vuex？
Vuex 是一个专门为 Vue.js 应用设计的&状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。说白了就是控制应用的一些全局状态。状态改变了，对应的视图也会改变。
在学习Vuex时，会有一些ES6特性，当遇到这些时，最好不要一带而过，去好好看一看这些es6特性。
比如在学习Action时可以看看ES6新增的Promise和参数解构。
实践的方法一样是先看别人别人写的代码，比如官方的购物车实例的应用结构
把之前写的demo优化一下，有些地方可以用用vuex
vuex主要是用来对不同组件间进行通信，它构建了一个Vue实例的全局数据与方法，这些数据与方法可以在该Vue实例的所有组件中get与set
到此，恭喜你已经成功入门Vue了。还学会了一点ES6,，附带一点Webpack，可以开始写一些小作品了，比如写个播放器啊，写个高级点的todoList等等，附上我写的一个仿照酷狗webapp的例子吧，
阅读(...) 评论()为了账号安全，请及时绑定邮箱和手机
Vue构建单页应用最佳实战
Vue构建单页应用最佳实战
我们将会选择使用一些vue周边的库
1.使用node.js后台，了解到如何获取数据
2.实现单页路由
3.实现HTTP请求我们的node
4.单项数据流
5.使用.vue文件进行开发
最终我们将会构建出一个小demo，不废话，直接上图。
1.我们将会使用webpack去为我们的模块打包，预处理，热加载。如果你对webpack不熟悉，它就是可以帮助我们把多个js文件打包为1个入口文件，并且可以达到按需加载。这就意味着，我们不用担心由于使用太多的组件，导致了过多的HTTP请求，这是非常有益于产品体验的。但我们并不只是为了这个而使用webpack，我们需要用webpack去编译.vue文件，如果没有使用一个loader去转换我们.vue文件里的style、js和html，那么浏览器就无法识别。
2.模块热加载是webpack的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。
通常来说，当我们修改了代码刷新页面，那应用里的所有状态就都没有了。这对于开发一个单页应用来说是非常痛苦的，因为需要重新在跑一遍流程。如果有模块热加载，当你修改了代码，你的代码会直接修改，页面并不会刷新，所以状态也会被保留。
3.Vue也为我们提供了CSS预处理，所以我们可以选择在.vue文件里写LESS或者SASS去代替原生CSS。
4.我们过去通常需要使用npm下载一堆的依赖，但是现在我们可以选择Vue-cli。这是一个vue生态系统中一个伟大创举。这意味着我们不需要手动构建我们的项目，而它就可以很快地为我们生成。
首先，安装vue-cli。(确保你有node和npm)
npm i -g vue-cli
然后创建一个webpack项目并且下载依赖
vue init webpack vue-time-tracker
cd vue-time-tracker
接着使用 npm run dev 在热加载中运行我们的应用
这一行命令代表着它会去找到package.json的scripts对象，执行node bulid/dev-server.js。在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器，我们在localhost:8080即可查看我们的应用。
这些都准备好后，我们需要为我们的路由和XHR请求下载两个库，我们可以从vue的官网中找到他们。
npm i vue-resource vue-router --save
初始化（main.js）
查看我们的应用文件，我们可以在src目录下找到App.vue和main.js。在main.js文件中，我们引入Vue和App，并且创建了一个vue的实例（因为在router这行引入了App组件router.start(App, '#app')）
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import Hello from './components/Hello.vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
//注册两个插件
Vue.use(VueResource)
Vue.use(VueRouter)
const router = new VueRouter()
// 路由map
router.map({
'/hello': {
component: Hello
router.redirect({
'*': '/hello'
router.start(App, '#app')
我们还需要在index.html包裹下我们的&app&&/app&
//index.html
&div id="app"&
&app&&/app&
我们的初始化就到这结束了，接下来让我们开始创建别的组件。
创建首页 View
首先，我们需要为我们的应用增加下bootstrap.css，为了方便，在这就直接在头部引入CDN。
&meta charset="utf-8"&
&title&计划板&/title&
&link href="///bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&
接着在App.vue里为我们的应用写个顶部导航。
// src/App.vue
&template&
&div id="wrapper"&
&nav class="navbar navbar-default"&
&div class="container"&
&a class="navbar-brand" href="#"&
&i class="glyphicon glyphicon-time"&&/i&
&ul class="nav navbar-nav"&
&li&&a v-link="'/home'"&首页&/a&&/li&
&li&&a v-link="'/time-entries'"&计划列表&/a&&/li&
&div class="container"&
&div class="col-sm-3"&
&div class="col-sm-9"&
&router-view&&/router-view&
&/template&
除了我们的navbar以外，我们还需要一个.container去放我们其余需要展示的信息。
并且在这里我们要放一个router-view标签，vue-router的切换就是通过这个标签开始显现的。
接着，我们需要创建一个Home.vue作为我们的首页
// src/components/Home.vue
&template&
&div class="jumbotron"&
&h1&任务追踪&/h1&
&a v-link="'/time-entries'"&创建一个任务&/a&
&/template&
既然我们需要显示Home，那就需要开始配置路由，这很简单，只需要在main.js里把Hello.vue换为Home.vue即可
router.map({
'/Home': {
component: Home
router.redirect({
'*': '/Home'
创建 任务列表 View
在这个页面，我们需要去创建我们的时间跟踪列表。
PS:现在这个页面没有数据，之后我们会在后台配置
// src/components/TimeEntries.vue
&template&
//`v-if`是vue的一个指令
//`$route.path`是当前路由对象的路径，会被解析为绝对路径当
//`$route.path !== '/time-entries/log-time'`为`true`是显示，`false`，为不显示。
//v-link 路由跳转地址
v-if="$route.path !== '/time-entries/log-time'"
v-link="'/time-entries/log-time'"
class="btn btn-primary"&
&div v-if="$route.path === '/time-entries/log-time'"&
&h3&创建&/h3&
//下一级视图
&router-view&&/router-view&
&div class="time-entries"&
&p v-if="!timeEntries.length"&&strong&还没有任何任务&/strong&&/p&
&div class="list-group"&
//v-for 循环渲染
&a class="list-group-item" v-for="timeEntry in timeEntries"&
&div class="row"&
&div class="col-sm-2 user-details"&
//`:src`属性，这个是vue的属性绑定简写`v-bind`可以缩写为`:`
// 比如a标签的`href`可以写为`:href`
//并且在vue的指令里就一定不要写插值表达式了(`:src={{xx}}`)，vue自己会去解析
&img :src="timeEntry.user.image" class="avatar img-circle img-responsive" /&
&p class="text-center"&
{{ timeEntry.user.name }}
&div class="col-sm-2 text-center time-block"&
&h3 class="list-group-item-text total-time"&
&i class="glyphicon glyphicon-time"&&/i&
{{ timeEntry.totalTime }}
&p class="label label-primary text-center"&
&i class="glyphicon glyphicon-calendar"&&/i&
{{ timeEntry.date }}
&div class="col-sm-7 comment-section"&
&p&{{ ment }}&/p&
&div class="col-sm-1"&
class="btn btn-xs btn-danger delete-button"
//事件绑定简写 @xxx
@click="deleteTimeEntry(timeEntry)"&
&/template&
关于template的解释，都写在一起了，再看看我们的script
// src/components/TimeEntries.vue
export default {
// 事先模拟一个数据
let existingEntry = {
name: '二哲',
email: '',
image: 'https://sfault-avatar./888/223/46dbc28d530_huge256'
comment: '我的一个备注',
totalTime: 1.5,
timeEntries: [existingEntry]
methods: {
deleteTimeEntry (timeEntry) {
//这个方法用于删除某一项计划
let index = this.timeEntries.indexOf(timeEntry)
if (window.confirm('确定要删除吗?')) {
this.timeEntries.splice(index, 1)
//这里会派发到父组件上，执行父组件events里的deleteTime方法
this.$dispatch('deleteTime', timeEntry)
timeUpdate (timeEntry) {
this.timeEntries.push(timeEntry)
//继续向上派发
return true
别忘了为我们的组件写上一些需要的样式
// src/components/TimeEntries.vue
height: 75
margin-top: 10
margin-bottom: 10
.user-details {
background-color: #f5f5f5;
border-right: 1px solid #
margin: -10px 0;
.time-block {
padding: 10
.comment-section {
padding: 20
由于新增了页面，所以我们继续配置我们的路由
// src/main.js
import TimeEntries from './components/TimeEntries.vue'
router.map({
'/home': {
component: Home
'/time-entries': {
component: TimeEntries
创建任务组件
这个比较简单我们直接给出代码
// src/components/LogTime.vue
&template&
&div class="form-horizontal"&
&div class="form-group"&
&div class="col-sm-6"&
&label&日期&/label&
type="date"
class="form-control"
v-model="timeEntry.date"
placeholder="Date"
&div class="col-sm-6"&
&label&时间&/label&
type="number"
class="form-control"
v-model="timeEntry.totalTime"
placeholder="Hours"
&div class="form-group"&
&div class="col-sm-12"&
&label&备注&/label&
type="text"
class="form-control"
v-model="ment"
placeholder="Comment"
&button class="btn btn-primary" @click="save()"&保存&/button&
&button v-link="'/time-entries'" class="btn btn-danger"&取消&/button&
&/template&
export default {
//模拟一个默认值
timeEntry: {
name: '二哲',
email: '',
image: 'https://sfault-avatar./888/223/46dbc28d530_huge256'
methods: {
let timeEntry = this.timeEntry
this.$dispatch('timeUpdate', timeEntry)
this.timeEntry = {}
这个组件很简单就3个input输入而已，然后就两个按钮，保存我们就把数据push进我们的列表里，并且初始化我们的timeEntry。取消的话，我们就路由定位到/time-entries即可。
ps:按理来说我们应该是要填写6个数据包括名字，邮箱和头像。但这里为了演示就暂时先这样。以后结合后台我们会继续完善这里。
LogTime属于我们TimeEntries组件的一个子路由，所以我们依旧需要配置下我们的router.map
// src/main.js
import LogTime from './components/LogTime.vue'
router.map({
'/home': {
component: Home
'/time-entries': {
component: TimeEntries,
subRoutes: {
'/log-time': {
component: LogTime
创建侧边栏组件
目前我们首页左侧还有一块空白，我们需要它放下一个侧边栏去统计所有计划的总时间。
// src/App.vue
&div class="container"&
&div class="col-sm-3"&
&sidebar :time="totalTime"&&/sidebar&
&div class="col-sm-9"&
&router-view&&/router-view&
由于我们把总时间存放在最上级的父组件上，所以我们需要把我们的总时间传入我们的sidebar组件。
在写下我们的两个时间计算方法
import Sidebar from './components/Sidebar.vue'
export default {
components: { 'sidebar': Sidebar },
totalTime: 1.5
timeUpdate (timeEntry) {
this.totalTime += parseFloat(timeEntry.totalTime)
deleteTime (timeEntry) {
this.totalTime -= parseFloat(timeEntry.totalTime)
最后给出我们Sidebar.vue
&template&
&div class="panel panel-default"&
&div class="panel-heading"&
&h1 class="text-center"&已有时长&/h1&
&div class="panel-body"&
&h1 class="text-center"&{{ time }} 小时&/h1&
&/template&
export default {
props: ['time']
props就是vue中传值的写法，不仅要在我们自定义的标签上传入&sidebar :time="totalTime"&&/sidebar&，还需要在组件里js里定义props: ['time']
本章，我们可以学习到许多关于vue的特性。
1.了解了vue-cli脚手架
2.初步对webpack有了一些了解和认识
3.如何用.vue愉快的开发
4.父子组件通信
5.路由（子路由）的应用
下一章，我们将会结合node学习vue-resource，更好的完善我们SPA应用
github地址：
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Web前端工程师
因为没有能力能保护所爱的人，所以不得不让自己更强大
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2为什么国内很难出高质量开源 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
为什么国内很难出高质量开源
今天因为VueJS展开的讨论，话锋转转，就转到这个主题了。这个主题其实也一直是我想要了解的问题，毕竟是这个FKPJS要走的路。怎么样才能做好开源。
这里先推荐一篇好文，，文章不长，但却有些感悟，第一条就撞在胸口，《一、形成主见》，行文大概意思是：有自己的一套，即便是很浅薄。
是的，即便浅薄，那也是心血所成，正如我正在做的FKPJS，虽然浅薄，但却花费了我不少时间和精力，融入了我关于开发、关于前端的一系列想法，我可以和你娓娓道来，关于FKPJS的点点滴滴，也是这些点点滴滴的情怀，和支持我的朋友们推动着FKPJS的前行。
回到主题，为什么国人很难出高质量的开源，这里的衡量标准，我是以GITHUB的star来做为衡量的标准。
我的这个朋友一直以来都是靠avalon来混生活，当然他远不止这一项技能。反正对于AVALON的使用大概有2年左右的时间吧，公司的运营后台也都是靠avalon在支撑着。
对于我的到来，对他不大不小有些影响，为嘛这么说，因为公司合并后，我被并入到他的部门，并且不大不小，
刚好踩他一头，而我是react的推动者，也在几个微信项目中实施和部署了FKPJS的这一套，自然大权在握，在
我的淫威之下，他也无可奈何。并且好歹说，FKPJS是我亲手打造的一套全栈框架，公司上层也挺认可。
因此，挣扎在所难免，对于开发者来说，我其实挺理解这种心情，但毕竟怎么说呢，他拿我没办法，于是他也开始
纠结、挣扎，想努力跳出我的影响范围，折腾了一个国外的react的全栈框架，又折腾了vue2.0。总之也是蛮
但最近我两关系改善，所以呢，也就偶尔侃侃技术圈的这些卵事。期间了解到，avalon在github上的star增
长非常的缓慢，1年左右的时间也就增长了1000来star，总共也就star，而VueJS自2.0的推出后，
star疯长，大概在2万左右。
期间又了解到，vue的作者有留学背景。又曾今在google等大公司撸过代码，仰望之情顿时油然而生。难怪，
难怪，都是牛人啊。
算是自嘲也好，自卑也罢，作为同是前端开发者来说，总算给自己也找了一个不错的借口，原来都是有这样的耀
眼光环。发挥一下阿Q精神（听说最近鲁迅的文章被全面清理出教科书了，艹艹艹，我中学时最爱看的内容）。
为什么更喜欢国外开源
玩笑之余，不妨深入一点。
毕竟编程是外国人发明的，天生就有语言的优势，比如react, flux, redux，在这些名词出来前，作为一众
国内的开发屌丝，我想是很难想象这样的名词，而这对于英语母语来说是很自然的事情
杂乱的命名方式
基于英语就那么点水平，想不出来的名词，自然靠拼音堆上，尤其在工作压力之下，那些个命名有些也是确实很
搞笑，不要说语义没有，就连意思在过了一段时间后估计也无人可知，包括自己。
结构不稳定
还是基于英语的问题，当你开发出来的东西，不具备可读性。外国人看不懂，中国人也看不懂，为什么，因为
可能有一个变量就夹杂着一半的英文，一半的拼音，因为这样的东西，有可能就是一个通用接口，在你想到合适的
单词的时候，这个接口就变了。我擦，我怎么敢用这样的东西。所以罗，能追随的开发者就寥寥无几了。
其实也看过avalon的源码。。。。，然后就没看了。
有料也倒不出来
同样还是英语的问题，比如今天侃到redux，虽然我是react的粉丝，但我从没用过flux，redux，react-router等东东，所以
跟着我这个朋友，啪啪啪的把这些个东西，折腾了一遍，心中千万草泥马奔腾，不仅复杂，而且复杂，还复杂。
为什么我有这样的感慨，我是知道flux的原理的，因此，FKPJS有自己的实现，来实现单向数据流，对于我来说
简单，足够，好用。这个之后会有专门的文章。 没有多余的配置，不需要一一对应关键字，独立于react的组件
，不同组件间可通信，异步数据的回调响应。。。。，好吧，我其实不知道该用什么术语来描述。总之，redux的这一套
大概都能实现吧
很不好意思的是，在FKPJS中的redux，我把它命名为SA，是个全局变量，是我自己倒腾出来的。但尼玛，SA是
个什么鸟，本意是store and action，我仅限于这样简单的英语单词，redux是个什么意思？谁来解释
基于SA，我实现了FKP-ROUTER，FKP-FLUX，FKP-PAGES，以及在业务中的大量使用。可以说SA在FKPJS中
是个核心存在。 但，but，1、SA没什么语义; 2、我也倒腾不出英文说明;
综上所述，大概就是我所总结的原因，当然应该还有其他很多的原因，但我感觉这个比较基础。也是逃脱不了的
魔咒，只能不断提升自己的英文能力，尽量做到最好吧，大家共勉!!
nm，通篇看下来，发现这软文写得666啊，给自己打82分。
我得说国内的教育，摧毁了一个人一切做成事的基础，不只是编程。任何一个人受十几年的应试教育，意识形态就是投机的意识形态，没有耐心，没有探索，擅长的就是把一切得到的新知识蒸馏一番，以期获得最高收益。应试的训练不就是这么回事吗？
做好自己就行，国内教育是有问题，但关键还在我们自身。
中国教育最失败的领域就是意识形态了，我们要扪心自问，到底是自己的问题，还是教育的问题。我看到的现实是，大多数人根本不相信意识形态那套东西。既然不相信，那为什么又要把自身的一些问题怪罪到意识形态教育上去？这其实是为自己找个借口，很多问题说白了还是自身的问题，只是有的人不愿意承认罢了。
好的开源项目有的时候并不是技术本身的问题，更多的是持续的投入，这就涉及到长期利益和短期利益权衡的问题。国外一些著名项目得到各种资助的，国内这个环境还不成熟，在利益兑现这点上，我们是落后的。国内个人做开源能够兑现利益的也就那么几个人，在这种环境下，大家做的其实就是一种情怀，只能慢慢来了。
5分钟造火箭…
这样浮躁的环境，有情怀就不错了。
补充一个点，无长期投入，测试等就跟不上，无好的项目，也没人愿意资助，又坑回来了，555
我是从avalon转到vue的，不吹，后者对前者，是全方位的碾压。语法，结构，文档，周边，生态。
尤其是文档，你几乎很难相信这是个个人作品。
长期投入才是王道
每次命名的时候都会难受
不要难受…又是一次 Brain Storm 啊~要享受
之前某 FM App泄露的源代码里面不是有欧洲众神…
Zeus / Prometheus …
也挺有意思的啊
我喜欢拿各种武器命名
predator / nimitiz / cobra …
哈哈 因为命名都能想半天
谁说国内没有高质量开源！！！！
redux是因为内部实现的时候用了Array.prototype.reduce()，如果你了解字根（类似于中文的偏旁部首）。那么，reducer这种命名就随手粘来了。对于程序员英文真的很重要啊！
不管环境怎么样，我们还是得保持一颗匠心，不然和咸鱼有什么分别，哈哈哈哈
嗯，我只是自嘲一下，还是会坚持做开源的
我的Excel模板引擎ejsExcel就很优秀啦
还有一种情况，国人很多时候开源很多时候是我有能力要秀出来，有star目的就达到了，然后就没有然后了。
首先，一个优秀的开源项目要投入多少精力啊。国内的程序员远远没有国外的程序员那么多自由时间吧。
其次，github上国内star数多的，大部分不是项目，是各路“大神”的博客。你幸幸苦苦的一个项目搞一年两年，别人写两篇入门文章就比你的项目关注度高了，你还有兴趣去搞项目么。
最后，一些大公司，把开源的东西改改拿去用了，又回馈给社区什么了呢？
共勉。赞楼主的开源精神，不过至少要注意下基本的代码风格吧。。打开的第一个文件，就发现存在以下问题：
缺少 ‘use strict’ 会报错吧
require模块那const和var混用
用分号与不用分号混用
2个空格缩进和4个空格缩进混用
字符串单引号和双引号混用
if后有空格，{左侧没空格
英语不咋地，真的好伤啊
楼主的开源精神是值得赞赏的。
不过你的项目如果按优秀开源项目来评论的话，我发现尚存在几个问题：
模块很多，但是尚没有分离
命名不够国际化，全部大写，也不容易记忆，也不知道什么意思
未看到有任何测试代码。
产品级的代码里不应该有太多的console.log信息
最后祝楼主的项目越来越好，质量越来越高。
star多还不容易啊? 楼主说了半天也没看到本质问题, 就是除了技术,中国人的宣传能力非常差.
例如vuejs 和 react 真是因为技术牛,好用吗, 太天真了. jQuery 这么长时间 star 才多少, nodejs项目 star 才多少.
要想star多 把用来做技术的时间用来做宣传推广就可以了.
但最后说一下 东西好不好, 过了几年有没有人在用那是另外一回事, 就想react vuejs 现在或, 过两年可能就消失了. 最后还要看大公司的资助背景, 就想node.js
在中国开源谁来买单呀
你说的对，但推广也建立在产品上。nodejs和react vuejs都不在一条线上，不好讨论
开源是为了改变世界好吗 ^_^!!，拿出你的情怀来
是的 为四化建设而奋斗
所以我们还是和这个世界稍微有些“格格不入”。
我的感受是个人开源和以官方开源的形式能获取到的关注量差别比较大。个人基本要靠自己去宣传了。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的}