入坑VUX

鑑於公司要使用VUX，今天來學習一下關於VUX的相關知識點。
詳細步驟的學習請前往：https://doc.vux.li/zh-CN/

---

簡介

1.VUX（讀音 [v’ju:z]，同 views）是基於WeUI和Vue(2.x)開發的移動端UI元件庫，主要服務於微信頁面。
2.VUX 是庫而非框架，雖然有專用的 vux-loader，但並不影響你自由地使用其他元件庫或者工具庫。
3.VUX 必須配合 vux-loader 使用，如果不使用 vux2 模板請按照文件正確配置。
less@3.x 有嚴重的相容問題，請暫時使用 less@^2.7.3。
暫未適配 vue-cli@3.x
4.vux-loader保證了元件按需使用，因此不用擔心最終打包了整個vux的元件庫程式碼。

安裝

1.npm install vue-cli -g # 如果還沒安裝
2.vue init airyland/vux2 vux
3.npm install
4.npm run dev

專案啟動：

程式碼檢視

由於技術水平實在是水的原因，看這個官方文件很不友好啊。
首先開啟原始碼，發現在router/index下引入了路由，又在main.js中重寫了路由，作者可能是為了還原vuecli腳手架的原始碼目錄結構。

然後大致略過程式碼後，相當於目前的專案是一個空專案，然後在作者搭好的一個配置下進行開發。

作者github專案地址：https://github.com/airyland/vux
對比作者專案進行專案開發：
首先進入src/main.js，找到掛載點，進入App.vue檢視程式碼：
引用元件：

  components: {
    Radio,
    Group,
    Cell,
    Badge,
    Drawer,
    ButtonTab,
    ButtonTabItem,
    ViewBox,
    XHeader,
    Tabbar,
    TabbarItem,
    Loading,
    Actionsheet
  },

此時將main.js中的router注掉，引入router，使用專案初始化的HelloWorld.vue元件，可以直接在src/demos目錄下，將demo元件貼上即可看出效果。demo檔案應該是專案的源子元件。

小結：

---

由於對vux的理解不深，目前看vux只是作為一個庫，寫好了一些樣式供我們使用，這種庫檔案需要我們熟練的掌握每個元件的效果顯示，這樣的確讓我們在元件的程式碼開發中抽離出來，但是，對於初學者而言，除了能熟練使用這種庫工具，更重要的是要對其實現有一個深入的學習過程，畢竟複製貼上也是要有內涵的。