Vux Configuration Guide in Vue

Introduction

Vux (pronounced [v'ju:z], same as views) is a mobile UI component library developed based on WeUI and Vue(), mainly serving WeChat pages.

Based on webpack+vue-loader+vux, mobile pages can be quickly developed, and vux-loader can be combined with vux-loader to facilitate you to customize the required styles based on WeUI.

vux-loader ensures that components are used on demand, so there is no need to worry about finally packaging the entire vux component library code.

vux does not rely entirely on WeUI, but try to keep the overall UI style close to WeUI's design specifications. The initial goal was to create an easy-to-use, practical and beautiful mobile UI component library. Now it is still a long way from its ideal state, so everyone needs to provide timely feedback on issues and contribute code.

process

Vux is a UI library. The official website is here. The configuration guide of the official document focuses on the list of technologies. I will simplify the configuration process of Vux here.

1. Install vux

npm install vux --save

2. Install less-loader

vux uses less to compile source code, so there must be less-loader in the project.

npm install less less-loader --save-dev

3. Install vux-loader and configure vuxLoader:

Install vux-loader:

npm install less vux-loader --save-dev

You can not install or configure vux-loader. If you do not configure, you can introduce components like this:

import AlertPlugin from 'vux/src/plugins/Alert'
import ToastPlugin from 'vux/src/plugins/Toast'

After configuration, you can introduce components like this:

import { AlertPlugin, ToastPlugin } from 'vux'

The configuration process is as follows:

Modify it as follows, where webpackConfig is your previous configuration (that is, the one on the right before, now saved as this variable):

const vuxLoader = require('vux-loader')
 = (webpackConfig, {
  options: {
    showVuxVersionInfo: false //Close the version information output by vux in console  },
  plugins: [{
    name: 'vux-ui'
  }]
})

Summarize

The above is the Vux configuration guide in Vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!