引入 VUX 库

基于webpack + vue-loader + vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

安装 Vux

npm install vux --save

安装less-loader

为了正确编译less源码

npm install less less-loader --save-dev

安装 yaml-loader

为了正确进行语言文件读取

npm install yaml-loader --save-dev

安装vux-loader

保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

npm install vux-loader --save-dev

安装完这些依赖后，还有些文件需要修改下。

修改 webpack.base.conf.js

为了降低使用成本及不侵入原来配置，只需要调用merge方法对原来webpack配置进行操作

const webpackConfig = {} // 原来的 webpack.base.js 配置

把原来的 module.exports 替换成 const webpackConfig

引入vux-loader

const vuxLoader = require('vux-loader')

调用merge方法

module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [{
    name: 'vux-ui'
  }]
})

最后重新运行启动项目

npm run dev

不知道自己有没有引入成功的话，可以试一下引入一个简单的按钮组件尝试一下。

• 引入按钮组件并注册

import { XButton } from 'vux'
export default {
  components: {
    XButton
  }
}

• 使用组件

<template>
  <div>
    hello vux
    <x-button
      type="primary"
      text="按钮"
    >
    </x-button>
  </div>
</template>

我们可以看到按钮能被正常加载，并且控制台也没有任何报错，这个时候就说明 VUX 引入成功了。

至此结束 ✧(≖ ◡ ≖✿)嘿嘿