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框架核心之數據劫持