UC浏览器、稀土掘金、
滴滴, 还出了一本书 Vue.js 权威指南
饿了么,开源了一个基于Vue的UI库 GitHub - ElemeFE/element: Desktop UI elements for Vue.js 2.0
阿里的 weex GitHub - alibaba/weex: A framework for building Mobile cross-platform UI
GitLab选择了Vue https://about.gitlab.com/2016/10/20/why-we-chose-vue/
荔枝FM,移動端部分使用Vue
B 站的三个项目 (•̀ω•́ 」∠):
圈子:哔哩哔哩兴趣圈,二次元兴趣交友社区
直播(仅首页与活动页):哔哩哔哩直播,二次元弹幕直播平台
周边商城:bilibili-周边商城
集Vue+TyleScript+Webpack+...开发的资源流水线
Vue+
Vue是东西呢?http://cn.vuejs.org/
从Vue2.0开始吧,之前有用过Vue1.0+。
由尤雨溪开发并维护的前端框架,在这两年2015、2016国内大大被重用和提起。
Vue 2.0 中文版
在国内有些大公司已经引进Vue来处理业务:
UC浏览器、稀土掘金、
滴滴, 还出了一本书 Vue.js 权威指南
饿了么,开源了一个基于Vue的UI库 GitHub - ElemeFE/element: Desktop UI elements for Vue.js 2.0
阿里的 weex GitHub - alibaba/weex: A framework for building Mobile cross-platform UI
GitLab选择了Vue https://about.gitlab.com/2016/10/20/why-we-chose-vue/
荔枝FM,移動端部分使用Vue
B 站的三个项目 (•̀ω•́ 」∠):
圈子:哔哩哔哩兴趣圈,二次元兴趣交友社区
直播(仅首页与活动页):哔哩哔哩直播,二次元弹幕直播平台
周边商城:bilibili-周边商城
上面的信息基本来自知乎》https://www.zhihu.com/question/33264609
更新项目
简书
饿了吗
网易云音乐
知乎日报
Node爬虫接口: https://ecitlm.github.io/SpliderApi/#/
开始Vue
已经在知乎发表了一篇文章 新手向:Vue 2.0 的建议学习顺序
我在这里就加几点:
好啦~~~
一般其实呢
最重要的就是会排查错误和查找问题,也要会最新资讯。
npm 和cnpm 的关系 sass、node-sass 在npm install的时候为什么老是错误
翻墙和网络好
哈哈哈,看到下面有人评论:Vue 不难学,难的是配置 Webpack……哈哈。
所以在学前端的时候,还需要学浏览器、 HTTP、数据、网络 ...
更类似的东东
之前很久之前就是JSP,有看过、接触过JSP的同学们都知道
JSP 的语法就是在HTML里加入自定义的东西和加入了动态语言
哦,好吧,我们就说MVC模式,还有MVVM模式............ 哎呀,可能早期还会接触到backbone框架的人,或者已经不是很重要了
重要的是接触过angular的人,这一下就会更加很好非常棒地.....
就是很棒,别说了
我想说的就是:
一步一步来...
Vue 基础
有个Vue社区 http://www.vue-js.com/
2.0中文社区,上面有提到,再来再次给出《Vue 2.0 中文版》
看一下2.0的API:https://vuefe.github.io/api/
组件
vue-router
来,链接在这里:vue-router 2
路由对象和路由匹配
路由对象,即$router会被注入每个组件中,可以利用它进行一些信息的获取。如
路由选项
如,我想采用一个有路径格式化并启用Html5 history功能的路由器,则可以在路由器初始化的时候,指定这些参数:
请暂时参考这篇文章VueJs路由跳转——vue-router的使用
注意项
编程式的导航
1、声明式:router-link :to="..." || 编程式:router.push(...)
这个方法会向 history 栈添加一个新的记录
2、声明式:router-link :to="..." replace || 编程式:router.replace(...)
不会向 history 添加新记录,替换掉当前的 history 记录
3、router.go(n)
4、操作 History
命名路由 和 命名视图 命名路由就是在路由加个 name 的标签
命名视图就是在视图加个 name 的标签,可以设置默认值
重定向 和 别名
重定向:内部跳转
别名:保持当前路由去访问另一个路由
HTML5 History 模式
这个给个链接自己去玩 http://router.vuejs.org/zh-cn/essentials/history-mode.html
因为这个比较复杂和需要后台来配合...
导航钩子(路由ing锁)
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。 来来来:http://router.vuejs.org/zh-cn/advanced/navigation-guards.html
路由元信息 (就是标志过滤处理)
过渡动效 ...
数据获取
1、导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。 2、导航完成之前获取:导航完成前,在路由的 enter 钩子中获取数据,在数据获取成功后执行导航。
滚动行为
注意: 这个功能只在 HTML5 history 模式下可用。
路由懒加载
说白了就是模块化加载
结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。
Vuex 状态管理
登录状态,信息储存、暂存,操作状态。
有空可以去解读源码:http://vuex.vuejs.org/en/index.html
有中文版: https://segmentfault.com/a/1190000007108052
Vue-loading
Vue-resource
动画过渡
http://vuejs.org/guide/transitions.html
项目目录
webpack
Vue-cli 构建工具
还需要一些周边知识
Node+npm Es6 Sass webpack gulp
项目
豆瓣API 聚合数据