vue生态圈

本文来自网易云社区

做者：刘凌阳

前言

公司社区上关于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框架核心之数据劫持