vue 使用 vux

不得不说一句 vux 的文档太难看了（包括页面设计），从配置到使用都有点折腾，做一个记录。

配置 vux

安装：

1. 安装 vux

npm i vux --save

2. 安装vux-loader、less、less-loader、yaml-loader

npm i vux-loader less less-loader yaml-loader --save-dev

配置：

1. 安装 vue loader

npm install vue-loader@14.2.2 -D

2. 在根目录下（ package.json 同级目录）新建 vue.config.js 文件，写入以下代码：

module.exports = {
    configureWebpack: config => {
        require('vux-loader').merge(config, {
            options: {},
            plugins: ['vux-ui']
        })
    }
}

使用 vux

以 alert 组件为例子：文档地址

1. 假设是局部注册，将文档上的这一块放进 vue 文件：

微信截图_20190307112457.png

2. 使用组件应该都知道吧：

<alert></alert>

3. 组件属性看这一块的说明

微信截图_20190307112816.png

4. 示例：

<alert v-model="show" :title="'你吃饭了吗？'" :content="'还没啊'" :hide-on-blur="true"></alert>

上面代码当 show 变量为 true 的时候，会弹出窗口，窗口标题是 你吃饭了吗 ，内容是 还没啊 ，当点击旁边的 mask 遮罩层时这个窗口也会关闭。

使用总结

在文档里基本只要看这两块内容就可以了，别的可以不看。
再说一句 vux 的文档真的很烂。