本文来自网易云社区

作者:刘凌阳

前言

公司社区上关于Vue的文章挺少的(少的可怜),不禁为Vue愤愤不平,此文应运而生。

但笔者水平有限,也写不了什么特别高深的东西,只能简单介绍下Vue生态圈,如有不对之处,还望指正。

Vue.js

Vue.js是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是“轻巧”  。如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用。为什么这么说,因为Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js却一直受到一定程度的关注,而其本身也在高速发展中,不论是生态、社区、资源、插件等等都在日趋壮大。如果您还未曾了解Vue.js的话,建议您阅读  http://cn.vuejs.org/v2/guide/,这里有Vue.js正确的食用方法。如果您想在此文中知晓Vue.js核心的话,可能要让您失望了。本文不会介绍Vue.js的语法,模板、组件、API等等,这是一篇介绍Vue.js周边或者说Vue.js生态的文章(当然这要求你对Vue.js有一定程度的了解)。

Vuex

如果说整个生态圈里vue.js作为核心,坐实了老大地位的话,我会把Vuex放在老二的位置。学过React的人都知道Redux  的重要性,而Vuex之于Vue就像Redux之于React。

Vuex 是一个专为 Vue.js 应用程序开发的  状态管理模式  。  灵感来自Flux和Redux,但简化的概念和实现是一个专门为  Vue.js应用设计的状态管理架构。如果您的应用程序足够简单,建议您不要使用Vuex。  但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

言归正传,什么是状态管理模式?讲讲我自己的理解吧。当你在开发应用程序时,你一定会分解出很多组件进行开发,而  各个组件之间想必在逻辑上多少是有关系的。  那么组件之间的“通信”,就成了待解决问题。  以前我们试图用事件广播来做,但随之而来的问题是,在应用不断的扩展、变化中,事件变得越来越复杂,越来越不可预料,以至于越来越难调试,越来越难追踪错误。这当然不是我们想要的,我们希望应用的各个部分都易维护、可扩展、好调试、能预测。于是,状态管理模式冒了出来。

几个重要的概念:

  • state:驱动应用的数据源;

  • actions:响应在用户操作行为导致的状态变化;

  • mutations:引发状态改变的所有方法的集合;

  • store对象:store对象是Vuex.Store的实例。在store内有分为state对象和mutations对象。

简单点说,本来需要共享状态的更新是需要组件之间通讯的,而现在有了Vuex,所有组件就都和store通讯了。问题就自然解决了。

vue-router

都说Vue牛逼,那一定也有一套自己路由的实现,接下来让我们来看看vue-router。

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

vue-router的用法也是异常简单:

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入`to`属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个`<a>`标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JS

// 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)// 1. 定义(路由)组件。// 可以从其他文件 import 进来const Foo = { template: 'foo' }const Bar = { template: 'bar' }// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器,或者,只是一个组件配置对象。const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]// 3. 创建 router 实例,然后传 `routes` 配置const router = new VueRouter({
  routes // (缩写)相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能const app = new Vue({
  router
}).$mount('#app')

现在,你已经完成了整个应用的路由配置,到浏览器上看看效果吧!

vue-devtools

vue-devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展  。一张图看懂它是什么:

注意:  初次安装好vue-devtools以后,需要关闭chrome devtool再开,才能看见vue的标签(通常在最后)。如果你正在使用我提供的例子,或者同样也是在浏览器访问自己本机写的html,需要在vue-devtools的设置里面勾选“允许访问文件URL”(如图)。

webpack

把webpack放在这里讲似乎不太合适,毕竟这并不是Vue独有的东西。而且webpack的大名说不定比Vue本身还响亮。看近期Github上各大主流的项目,无一例外都已经是基于webpack来开发。  你可以不打算将其用在你的项目上,但没有理由不去掌握它。篇幅有限,不展开描述,一句话概括webpack的主要用途:  把所有浏览器端需要发布的资源做相应的准备,完成资源的合并和打包。

vue-cli

作为Vue的脚手架,vue-cli无疑是出色的。它可以帮你快速的上手vue构建的工程,而无需再花多余的时间去熟悉vue工程的文件系统。

使用它的方法也很简单:

  1. npm install -g vue-cli      //全局安装vue-cli

  2. vue init webpack projectName  //生成项目名为projectName的模板,这里的项目名projectName随你自己写

  3. cd projectName

  4. npm install             //初始化安装依赖

  5. npm run dev            //启动工程

在浏览器打开http://localhost:8080,则可以看到欢迎页了:

再回头看看项目结构,是不是一目了然:

iView

其实这是Vue.js的一个ui库,我一直不明白为什么作者不直接把它叫做ivue或者vue-ui,似乎这样的名字才更明了吧,或许好名字都早已被人抢先注册了~

言归正传,iView本身还是异常强大的,附iView官方文档:  https://www.iviewui.com/

我们来看看iView都有哪些ui组件:

是不是还挺丰富的?

React?

what?React怎么成Vue生态圈里的东西了?别激动,这不是有个问号吗?其实我只是想讲讲和React的区别罢了,瞧把你激动的。

相似:

其实都是model driven思想的严格践行者,以及通过component拆分完整整个系统的分治。

不同:

1.react基本上已经有一套遵循Flux的完整开发方案(基本上也就这一套大家默认的方式),而vue虽然有配合vuex使用,但是还有其他很多组织方式来解决,所以并不算是有固定模式,相对灵活很多,当然这个你可以看作是优势,也可以看作是不足;

2.react社区还是要比vue大很多;

3.react在view层侵入性还是要比vue大很多的;

4.首次渲染性能,对于大量数据来说react还是比vue有优势;

5.对于component的写法,react偏向于all in js,语法学习上需要下一些功夫,而vue配合vue-loader,其实在很大程度上让你不会觉得陌生--这不就是web component么。

网易云大礼包:https://www.163yun.com/gift

本文来自网易云社区,经作者刘凌阳授权发布

相关文章:
【推荐】 人工智能的全面科普
【推荐】 Vue框架核心之数据劫持

vue生态圈的更多相关文章

  1. 阿里云PolarDB及其共享存储PolarFS技术实现分析(上)

    PolarDB是阿里云基于MySQL推出的云原生数据库(Cloud Native Database)产品,通过将数据库中计算和存储分离,多个计算节点访问同一份存储数据的方式来解决目前MySQL数据库存 ...

  2. django项目在uwsgi+nginx上部署遇到的坑

    本文来自网易云社区 作者:王超 问题背景 django框架提供了一个开发调试使用的WSGIServer, 使用这个服务器可以很方便的开发web应用.但是 正式环境下却不建议使用这个服务器, 其性能.安 ...

  3. 现代前端库开发指南系列(二):使用 webpack 构建一个库

    前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输 ...

  4. 19.Vuex详细使用说明-一篇文章涵盖所有知识点

    vuex官网: https://vuex.vuejs.org/zh/ 一. 前言 不管是Vue,还是 React,都需要管理状态(state),比如组件之间都有共享状态的需要. 什么是共享状态? 比如 ...

  5. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  6. 基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. React 还是 Vue: 你应该选择哪一个Web前端框架?

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  9. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

随机推荐

  1. 1130 Infix Expression

    题意:给出一个语法树(二叉树),输出相应的中缀表达式. 思路:很显然,通过中序遍历来做.通过观察,发现除了根结点之外的所有非叶结点的两侧都要输出括号,故在中序遍历时判断一下即可. 代码: #inclu ...

  2. ZedGraph类库之基本教程篇

      第一部分:基本教程篇                 ZedGraphDemo中一共有9个基本教程的例子.其中大部分都类似,我会讲解其中一些比较典型的例子.把ZedGraph类库的使用逐步展现给大 ...

  3. .Net 框架实现AOP(动态代理实现AOP,本文为翻译)

    在上一节,我们将静态实现AOP,但是对于一个大型项目,要想为每个类,每个方法都去实现AOP ,进行日志记录和权限验证似乎是不可能的. 即使可能对于成百上千个类维护,也是很难维护.所以今天的主题就是如标 ...

  4. 可重复使用Tab切换代码和纯js代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 搭建Easyui环境在Myeclipse或Eclipse中

    转自:https://www.cnblogs.com/henuyuxiang/p/4283018.html 1.下载Easyui.网址:http://www.jeasyui.com/download/ ...

  6. 15-EasyNetQ之对延迟消息插件的支持

    RabbitMQ延迟消息插件仍然在实验阶段.你使用这个功能要自担风险. RabbitMQ延迟消息插件为RabbitMQ增加了新的交换机类型,允许延时消息投递. EasyNetQ为交换机通过定义一种新的 ...

  7. SSH免密登陆配置过程和原理解析

    SSH免密登陆配置过程和原理解析 SSH免密登陆配置过很多次,但是对它的认识只限于配置,对它认证的过程和基本的原理并没有什么认识,最近又看了一下,这里对学习的结果进行记录. 提纲: 1.SSH免密登陆 ...

  8. Windows 环境下于虚拟环境中源码安装 cx_oracle

    安装前提条件: (1).安装 instantclient-basic-nt (2).安装 instantclient-sdk-nt (3).安装 Microsoft Visual C++ Compil ...

  9. git配置多用户多平台

    在Git使用中经常会碰到多用户问题,例如:你在公司里有一个git账户,在github上有一个账户,并且你想在一台电脑上同时对这两个git账户进行操作,此时就需要进行git多用户配置. 首先配置不同的S ...

  10. Gym 101128 B Black Vienna

    题意 有A-Z 26张牌,现在从中抽出3张牌,并把剩下的23张牌分给选手1和2,现在有n次询问,每次询问一个选手是否有某两张牌,和选手的回答.回答说自己有这两张牌中的几张,问拿出的三张牌有多少种方案能 ...