# vue资料

一篇不错的文章来自segmentfault

原文地址：<a href="https://segmentfault.com/a/1190000008378497?utm_source=weekly&amp;utm_medium=email&amp;utm_campaign=email_weekly">https://segmentfault.com/a/1190000008378497?utm_source=weekly&amp;utm_medium=email&amp;utm_campaign=email_weekly</a>

<h3 id="articleHeader2">如何优雅地使用此文档</h3>

<ol>
    <li>入门先从官网文档入手，粗略过一遍有个印象，力求回查时能找到对应的关键字或位置。
<ul>
    <li><a href="http://cn.vuejs.org/" target="_blank">vuejs中文官网</a></li>
    <li><a href="http://vuejs.org/" target="_blank">vuejs英文官网</a></li>
    <li><a href="https://github.com/vuejs" target="_blank">vuejs组织</a></li>
</ul>
</li>
    <li>发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。</li>
    <li>珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时间都很宝贵。</li>
    <li>先搜索，再思考，最后再提问，很多人把这个顺序搞反了。</li>
    <li>
<ul>
    <li><a href="https://www.zhihu.com/question/25464141" target="_blank">如何优雅地向前辈或者高手请教技术问题？</a>
以上部分观点出自此文 <a href="http://www.zhihu.com/question/20824615" target="_blank">如何优雅地使用 Stack Overflow</a></li>
</ul>
</li>
</ol>

<h3 id="articleHeader3">一. 资源教程</h3>

<ol>
    <li>综合类
<ul>
    <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">vuejs 英文资料</a></li>
    <li><a href="https://shimo.im/s/ab53739d-ca98-bd1e-aea0-fcc7378c6bb3" target="_blank">Vue中文资料总汇</a></li>
    <li><a href="http://segmentfault.com/a/1190000000411057">Vue.js 的一些资源索引</a></li>
    <li><a href="http://www.jianshu.com/p/afd8e1db7d9b" target="_blank">vue资料</a></li>
    <li><a href="http://www.cnblogs.com/keepfool/p/5657065.html" target="_blank">Vue.js——vue-resource全攻略</a></li>
</ul>
</li>
    <li>入门类
<ul>
    <li><a href="http://segmentfault.com/a/1190000003968020">vue 快速入门</a></li>
    <li><a href="https://segmentfault.com/a/1190000005018970" target="_blank">vuex - 入门教程实例1</a></li>
    <li><a href="https://segmentfault.com/a/1190000005148935">vuex - 入门教程实例2</a></li>
    <li><a href="https://segmentfault.com/a/1190000006988584" target="_blank">vuex - 入门教程实例3</a></li>
</ul>
</li>
    <li>英文教程
<ul>
    <li><a href="https://laracasts.com/series/learning-vue-step-by-step/" target="_blank">Learning Vue 1.0: Step By Step</a></li>
    <li><a href="https://coligo.io/" target="_blank">vue Learning Tutorials</a></li>
</ul>
</li>
    <li>社区
<ul>
    <li><a href="http://segmentfault.com/t/vue.js">sf - vue标签</a></li>
    <li><a href="https://www.zhihu.com/topic/20022242/questions" target="_blank">知乎 - vue标签</a></li>
    <li><a href="http://vue-js.com/" target="_blank">Vue.js专业中文社区</a></li>
    <li><a href="https://github.com/vuejs/vue/issues" target="_blank">vue - issues</a></li>
</ul>
</li>
    <li>视频教程
<ul>
    <li><a href="https://github.com/bhnddowinf/vuejs-learn" target="_blank">小凡哥录制视频教程</a></li>
</ul>
</li>
</ol>

<h3 id="articleHeader4">二. 文档</h3>

<ul>
    <li>API
<ul>
    <li><a href="http://cn.vuejs.org/api/" target="_blank">Vue.js - API</a></li>
</ul>
</li>
    <li>router
<ul>
    <li><a href="http://router.vuejs.org/zh-cn/index.html" target="_blank">vue-router文档</a></li>
</ul>
</li>
</ul>

<h3 id="articleHeader5">三. 组件</h3>

<h4>1. 官方组件</h4>

<ul>
    <li>Loader
<ul>
    <li><a href="https://github.com/vuejs/vue-html-loader" target="_blank">html loader module for webpack</a></li>
</ul>
</li>
    <li>Router
<ul>
    <li><a href="https://github.com/lazyhero/vue-spa-demo" target="_blank">vue-spa-demo</a></li>
</ul>
</li>
    <li>Vuex：专门为 Vue.js 应用设计的状态管理架构
<ul>
    <li><a href="http://vuex.vuejs.org/zh-cn/intro.html" target="_blank">vuex</a></li>
</ul>
</li>
    <li>Ajax
<ul>
    <li><a href="https://github.com/vuejs/vue-hackernews/blob/gh-pages/src/components/NewsView.vue#L61" target="_blank">vue + ajax</a></li>
    <li><a href="https://github.com/vuejs/vue-resource" target="_blank">vue + ajax</a></li>
    <li><a href="https://github.com/vuejs/vue-async-data" target="_blank">vue-async-data</a></li>
</ul>
</li>
    <li>Vue-cli
<ul>
    <li><a href="https://github.com/vuejs/vue-cli" target="_blank">Simple CLI for scaffolding Vue.js projects</a></li>
</ul>
</li>
</ul>

<h4>2. 其它组件</h4>

<ul>
    <li>UI类
<ul>
    <li><a href="https://github.com/yuche/vue-strap" target="_blank">VueStrap：使用 Vue.js 和纯 JavaScript 构建的 Bootstrap 组件</a></li>
    <li><a href="https://github.com/aidenzou/vue-weui" target="_blank">针对 Vue 框架移植的 We UI 框架的适配，让 mobile开发过程成为一种享受</a></li>
    <li><a href="http://yuche.github.io/vue-strap/" target="_blank">vue bootstrap</a></li>
    <li><a href="https://github.com/bravf/VueUI" target="_blank">基于Vue、Bootstrap的一套MVVM组件，简单、易用、功能强大</a></li>
    <li><a href="https://github.com/eteplus/vue-sui-demo" target="_blank">用VUE 和 SUI-Mobile 写了一个移动端demo - vue-sui-demo</a></li>
    <li><a href="https://github.com/airyland/vux" target="_blank">Mobile web UI based on Vue and Weui</a></li>
    <li><a href="http://mint-ui.github.io/" target="_blank">Mint UI 基于 Vue.js 的移动端组件库</a></li>
    <li>[Vue Admin Panel Framework [WIP] ](<a href="https://github.com/fundon/vue-admin%29" target="_blank">https://github.com/fundon/vue...</a></li>
    <li><a href="https://github.com/qusiba/vue-slider" target="_blank">Vue 的图片轮播组件</a></li>
    <li><a href="https://github.com/myronliu347/vue-carbon" target="_blank">基于vue开发的material design ui库</a></li>
    <li><a href="http://gold.xitu.io/post/57b535405bbb50006300ffc9" target="_blank">iView：一套基于Vue的高质量UI组件库</a></li>
    <li><a href="https://www.iviewui.com/overview" target="_blank">iView - 一套基于 Vue.js 的高质量 UI 组件库</a></li>
    <li><a href="https://museui.github.io/" target="_blank">Muse-UI 基于 Vue 2.0 和 Material Desigin 的 UI 组件库</a></li>
</ul>
</li>
    <li>表格
<ul>
    <li><a href="https://github.com/jinzhe/vue-editable" target="_blank">ZEE大神作品 - vue-editable</a></li>
</ul>
</li>
    <li>分页
<ul>
    <li><a href="http://segmentfault.com/a/1190000003931500">vue入门－实现一个分页组件(1.0.3版本)</a></li>
    <li><a href="https://github.com/cycgit/vue-pagination" target="_blank">vue(1.0.3) 分页组件</a></li>
    <li><a href="https://www.npmjs.com/package/vue-pagination" target="_blank">分页组件 -- 命令方式，支持多个，主要靠配置</a></li>
</ul>
</li>
    <li>移动
<ul>
    <li><a href="https://github.com/vuejs/vue-touch" target="_blank">Hammer.js wrapper for Vue.js</a></li>
    <li><a href="https://github.com/MeCKodo/vue-tap" target="_blank">vue的tap手势插件</a></li>
</ul>
</li>
    <li>微信
<ul>
    <li><a href="http://aidenzou.github.io/vue-weui/" target="_blank">为微信Web服务量身设计</a></li>
</ul>
</li>
    <li>日历
<ul>
    <li><a href="https://github.com/jinzhe/vue-calendar" target="_blank">ZEE大神作品 - vue-calendar</a></li>
    <li><a href="https://github.com/hilongjw/vue-datepicker" target="_blank">Awe - 日历组件</a></li>
    <li><a href="https://github.com/jas0ncn/vue-timepicker" target="_blank">jas0ncn - 日历组件</a></li>
</ul>
</li>
    <li>进度条
<ul>
    <li><a href="https://github.com/greyby/vue-spinner" target="_blank">vue 进度条</a></li>
</ul>
</li>
    <li>验证
<ul>
    <li><a href="https://github.com/vuejs/vue-validator" target="_blank">Validator component for VueJS</a></li>
    <li><a href="https://github.com/xrado/vue-validator" target="_blank">form validator for vue 0.11</a></li>
</ul>
</li>
    <li>Lazyload
<ul>
    <li><a href="https://github.com/hilongjw/vue-lazyload" target="_blank">图片的lazyload</a></li>
    <li><a href="https://github.com/ElemeFE/vue-loadmore" target="_blank">下拉加载</a></li>
</ul>
</li>
    <li>Loader
<ul>
    <li><a href="http://segmentfault.com/a/1190000004060034">【vue】vue组件化开发初体验-示例vue-loader-example学习记录</a></li>
</ul>
</li>
    <li>Uploader
<ul>
    <li><a href="https://www.npmjs.com/package/vue-file-upload" target="_blank">vue-file-upload</a></li>
    <li><a href="https://www.npmjs.com/package/vue-file-upload-component" target="_blank">vue-file-upload-component</a></li>
</ul>
</li>
    <li>Slide
<ul>
    <li><a href="https://github.com/guan6/vue-onlySlider-x" target="_blank">vue-onlySlider-x</a></li>
</ul>
</li>
    <li>Drag
<ul>
    <li><a href="https://github.com/james2doyle/vue-drag-and-drop" target="_blank">vue-drag-and-drop</a></li>
</ul>
</li>
    <li>二维码
<ul>
    <li><a href="https://github.com/xiaokaike/vue-qrcode" target="_blank">vue-qrcode</a></li>
</ul>
</li>
    <li>省市联动
<ul>
    <li><a href="https://github.com/QingWei-Li/vue-region-picker" target="_blank">Vue 省市区三级联动组件</a></li>
</ul>
</li>
    <li>TimeLine
<ul>
    <li><a href="https://github.com/yelingfeng/vue-timelinepick" target="_blank">Vue企业级时间轴选择器</a></li>
</ul>
</li>
    <li>Template
<ul>
    <li><a href="https://github.com/yelingfeng/vue-ylf-template" target="_blank">vue2.0模板</a></li>
    <li><a href="https://github.com/yelingfeng/vue-2.0-FamilyBucket" target="_blank">vue2.0全家桶实例</a></li>
</ul>
</li>
</ul>

<h3 id="articleHeader6">四. 示例</h3>

<ul>
    <li>综合示例
<ul>
    <li><a href="http://cn-stage.vuejs.org/examples/" target="_blank">官方例子 - 包括Markdown编辑器，表格组件等</a></li>
    <li><a href="https://github.com/vingojw/vue-vueRouter-webpack" target="_blank">Vue, vue-router, Webpack 和 vue-loader</a></li>
    <li><a href="https://github.com/KennyWho/vue-chestnut" target="_blank">简单的vuejs例子 - 群内高手X-Roy大作</a></li>
    <li><a href="https://github.com/toplan/vue-spa-example" target="_blank">vue single page app example</a></li>
    <li><a href="http://segmentfault.com/a/1190000004372736">使用node+vue.js实现SPA应用</a></li>
</ul>
</li>
    <li>Ajax
<ul>
    <li><a href="https://github.com/james2doyle/vue-ajax-form-component" target="_blank">A Vue.js component for creating simple AJAX forms.</a></li>
</ul>
</li>
    <li>Webpack
<ul>
    <li><a href="http://jiongks.name/blog/just-vue/" target="_blank">Vue + webpack 项目实践</a></li>
    <li><a href="http://segmentfault.com/a/1190000003630417">基于vue.js和webpack的Chat示例</a></li>
    <li><a href="http://djyde.github.io/2015/08/29/vuejs-and-webpack-1/" target="_blank">Vue.js 和 Webpack（一）</a></li>
    <li><a href="http://djyde.github.io/2015/08/30/vuejs-and-webpack-2/" target="_blank">Vue.js 和 Webpack（二）</a></li>
    <li><a href="http://djyde.github.io/2015/08/31/vuejs-and-webpack-3/" target="_blank">Vue.js 和 Webpack（三）</a></li>
    <li><a href="https://github.com/MeCKodo/webpack" target="_blank">二哲 - 结合具体项目的webpack配置</a></li>
</ul>
</li>
    <li>Gulp
<ul>
    <li><a href="https://github.com/JsAaron/vue-gulp-webpack" target="_blank">vue-gulp-webpack单页面组件开发</a></li>
</ul>
</li>
    <li>Tab
<ul>
    <li><a href="http://yuche.github.io/vue-strap/#tabs" target="_blank">vue tab</a></li>
</ul>
</li>
    <li>Shopping
<ul>
    <li><a href="https://github.com/andylei18/vue-shopping" target="_blank">基于Vue模仿蘑菇街的单页应用</a></li>
</ul>
</li>
    <li>其它
<ul>
    <li><a href="http://okoala.github.io/vue-antd/#%21/docs/introduce" target="_blank">Ant Design 的 Vue 实现</a></li>
    <li><a href="https://github.com/shinygang/Vue-cnodejs" target="_blank">基于vue.js重写Cnodejs.org社区的webapp</a></li>
    <li><a href="https://github.com/giscafer/Ponitor" target="_blank">北京-giscafer - vue+webpack+node.js 价格监测应用</a></li>
</ul>
</li>
</ul>

<h3 id="articleHeader7">五. 开发工具相关</h3>

<ol>
    <li>Atom
<ul>
    <li><a href="https://github.com/CYBAI/language-vue-component" target="_blank">atom vue 代码高亮</a></li>
    <li><a href="http://www.jianshu.com/p/98f99c20493c" target="_blank">如何发布一个Atom的package</a></li>
    <li><a href="https://atom.io/packages/vue-format" target="_blank">vue-format</a></li>
</ul>
</li>
    <li>Sublime-text
<ul>
    <li><a href="https://github.com/vuejs/vue-syntax-highlight" target="_blank">Vue Syntax Highlight</a></li>
</ul>
</li>
    <li>Webstorm
<ul>
    <li><a href="http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81/" target="_blank">webstorm添加*.vue文件支持</a></li>
    <li><a href="https://plugins.jetbrains.com/plugin/8057?pr=webStorm" target="_blank">webstorm vue插件</a></li>
</ul>
</li>
</ol>

<h3 id="articleHeader8">六. 答疑</h3>

<ul>
    <li><a href="http://www.jianshu.com/p/7f7f050c9edf" target="_blank">Vue.js为什么不支持templateUrl模式</a></li>
    <li><a href="https://github.com/jrainlau/vuejs-demo" target="_blank">实现了vuejs组件之间的通讯问题</a></li>
    <li><a href="https://www.zhihu.com/question/38213423" target="_blank">国内有哪些公司在用Vue.js，有什么心得</a></li>
    <li><a href="https://www.zhihu.com/question/39149401" target="_blank">vue 支持服务器端渲染吗</a></li>
    <li><a href="http://div.io/topic/1343" target="_blank">Vue.js 和 Webpack</a></li>
</ul>

<h3 id="articleHeader9">七. 源码学习</h3>

<ul>
    <li><a href="http://jiongks.name/blog/vue-code-review" target="_blank">Vue.js 源码学习笔记</a></li>
    <li><a href="http://www.cnblogs.com/sskyy/p/3695003.html" target="_blank">VUE 源码分析</a></li>
    <li><a href="http://segmentfault.com/a/1190000004384515">vue源码分析之如何实现observer和watcher</a></li>
    <li><a href="https://segmentfault.com/a/1190000004670036" target="_blank">vue源码解析之一：transition</a></li>
    <li><a href="https://github.com/JsAaron/vue-analysis" target="_blank">Vue源码学习 Vue.js v1.0.18</a></li>
</ul>

<h3 id="articleHeader10">八. 框架相关</h3>

<ul>
    <li><a href="http://www.imooc.com/video/6346" target="_blank">尤小右 - 4-1 Vue.js-数据驱动的组件化前端开...</a></li>
    <li><a href="https://simplecast.fm/s/5e60d9be" target="_blank">Evan You - Diving Deep into Vue.js</a></li>
</ul>