sunmaobin.github.io icon indicating copy to clipboard operation
sunmaobin.github.io copied to clipboard
verified publisher icon sunmaobin

VUE 3.0 学习探索入门系列 - 回顾 vue2 辉煌一生（2）

Open sunmaobin opened this issue 4 years ago • 0 comments

1 Vue 数据一览

统计截止：2020-03-10

  • vuejs/vue 项目 Github Stars：159k，排行 JavaScript 语言类 第2名
  • vuejs/vue 项目 尤大 自 2016年以来 commits 次数：53w+，90% 代码出自他手，简直是劳模
  • vuejs 仓库总共有 108 个工程，生态体系浩大
  • vuejs 所有项目参与开发者：21人，全职人员应该不多
  • 全世界每周有100万活跃用户，公司遍布全球
  • NPM每周下载量大约 400万次
  • State of JavaScript 2018 调查，前端框架满意度 第1 (91%)
  • StackOverflow 2019 年度调查，Most Loved Web Frameworks 第2

部分数据参考：https://img.w3ctech.com/VueConf2019SH_Evan.pdf

img

（最后有视频链接）

2 Vue 核心卖点

  1. vue 上手容易
  2. vue 生态丰富完整
  3. vue 文档清晰明了

3 Vue 高效开发

Vue 只所以能成功，容易上手是最大的因素。

就拿许多搞 java 的童鞋来说，他们还停留在 jQuery 时代。

3.1 5分钟看到效果

你只要稍微告诉他下，5分钟就可以上手，这就是优势：

  1. 安装 Node 环境
    • https://nodejs.org/en/download/
  2. 安装 Vue Cli 脚手架
    • npm install -g @vue/cli
  3. 创建一个新工程
    • vue create my-project
    • 一直回车 Enter
  4. 打开浏览器访问
    • http://localhost:8080/

对于新手，当他第一眼能看到界面效果，那种激动之情，溢于言表。

3.2 强大的 .vue 组件

<template> </template> <script> export default { } </script> <style scoped> </style>

3.3 优秀的 Options 设计

  1. Options 数据
    • data
    • props
    • computed
    • methods
    • watch
  2. Options Dom
    • el
    • template
    • render
  3. Options 生命周期钩子
    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • activated
    • deactivated
    • beforeDestroy
    • destroyed
  4. Options 资源
    • directives
    • filters
    • components
  5. Options 组合
    • parent
    • mixins
    • extends
    • provide / inject

4 Vue 生态体系

以下是 Vue 生态中的基础能力：

4.1 Vue Cli 快速起步

https://cli.vuejs.org/zh/

快速创建一个 vue 项目

4.2 Vue Devtools 方便调试

https://github.com/vuejs/vue-devtools

Chrome/FF 的浏览器插件，方便调试 vue 项目

4.3 Vue Router 配置路由

https://router.vuejs.org/zh/

vue 项目菜单路由配置

4.4 Vuex 管理数据

https://vuex.vuejs.org/zh/

通过 vuex 轻松管理数据，组件之间共享数据

4.5 Vue SSR 服务端渲染

https://ssr.vuejs.org/zh/

服务端渲染，提高效率，提升体验，优化SEO

以上基础能力就相当于当年的 jQuery 一样，只是针对 JavaScript 层面的。而一个完整的页面，需要的三驾马车，还缺失 Html 和 Css，所以还需要有类似于 Bootstrap 类似的组件库。

以下是 Vue 生态中的优秀的 UI 组件库：

4.6 Element UI 桌面端UI

https://element.eleme.cn/#/zh-CN

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Github Stars：44.1k

4.7 View UI 桌面端UI

https://iviewui.com/

一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品

Github Stars：1.2k（由 iview 改名为 view ui，仓库变更，可能没包含旧 iview 的 stars）

4.8 Vant 移动端UI

https://youzan.github.io/vant/#/zh-CN/

轻量、可靠的移动端 Vue 组件库

Github Stars：12.9k

Vue 的生态体系远不止以上提到的几个大件，还有包括：Babel 的 vue 插件、Webpack 的 vue 插件 等等，当你构建一个项目时到后期时可能都会用到。

什么是成熟的生态体系？就是你项目中遇到的问题，基本都有人遇到过了，而且基本都有解决办法！这也就是 vue 2.x 成熟的地方了。

当然，牛逼不能吹的太大，不是所有的问题 vue 都能解决，这也就是接下来会有的 vue3.x

5 Vue 文档中心

不可否认的一点，Vue 的文档内容清晰，排版合理，细致周到。

要我说 Vue 文档最让我满意的一点：中文文档

作为对比，大家可以看看 Nodejs 的 ORM 库 Sequelize 的 API，简直无力吐槽。

5.1 入门教程

https://cn.vuejs.org/v2/guide/

5.2 API查阅

https://cn.vuejs.org/v2/api/

5.3 最佳实践

https://cn.vuejs.org/v2/style-guide/

5.4 经验之谈

https://cn.vuejs.org/v2/cookbook/

当然，除了以上几个比较正式的文档地址外，还有一些相关文档，但是上手门槛比较高（英文）：

5.5 Vue RFCs

https://github.com/vuejs/rfcs

Vue 的请求建议稿仓库，所有需要民调的，尤大都会在这里发布，比如：Vue3.x 的一些新特性。

5.6 Vue School

https://vueschool.io/

一个国外的 Vue 博客，内容很新，更新很及时。博客的维护者，都是行业专家， Vue 核心开发人员。

6 Vue Conf 布道

Vue Conf，Vue Conference 的简称，即：Vue 大会。

从2017年开始，截止目前 Vue 大会已经在中国开展了3次，国外也有多次。

不得不佩服尤大的精力和执行力！一个贡献了 Vue 90% 的前端开发工程师，还要天南海北的跑演讲，增加影响力！

  • 前端开发中，最懂产品的
  • 前端开发中，最会营销的

以下是国内的3次 Vue Conf 资料：

7 参考资料

one more thing

最后附上刚出炉的 vue.js 纪录片，堪比程序员里的美国队长，相信你看了一定会有所触动！

img

视频地址：https://www.ixigua.com/i6805039367925531140/

（本文完）

sunmaobin avatar Apr 21 '21 12:04 sunmaobin