入坑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 模板请按照文档正确配置。
[email protected] 有严重的兼容问题，请暂时使用 less@^2.7.3。
暂未适配 [email protected]
4.vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

安装

1.npm install vue-cli -g # 如果还没安装
2.vue init airyland/vux2 vux
3.npm install
4.npm run dev

项目启动：

vux.png

代码查看

由于技术水平实在是水的原因，看这个官方文档很不友好啊。
首先打开源代码，发现在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只是作为一个库，写好了一些样式供我们使用，这种库文件需要我们熟练的掌握每个组件的效果显示，这样的确让我们在组件的代码开发中抽离出来，但是，对于初学者而言，除了能熟练使用这种库工具，更重要的是要对其实现有一个深入的学习过程，毕竟复制粘贴也是要有内涵的。