VUX Mobile UI Library

VUX is a mobile UI component library built on top of WeUI and Vue (2.x), specifically designed for WeChat pages. It provides a set of components that follow the WeUI design specifications while extending them with several common mobile components.

Key characteristics:

• Library, not a framework: You can freely use VUX alongside other component libraries or tools.
• On-demand loading: When used with vux-loader, components are loaded on demand, ensuring that only the code for the components you actually use is included in your final bundle.
• Styling flexibility: While VUX uses less as its CSS preprocessor (consistent with WeUI), the flexibility of .vue single-file components allows you to use other preprocessors like SASS in your project.

The vux-loader is designed to simplify development by providing three core capabilities:

1. On-demand component loading: Allows you to import only the components you need, reducing bundle size.
2. Less variable definition: Enables the definition and use of Less variables within your project.
3. Compile-time optimizations: Performs code optimizations during the build process.

To integrate it into an existing project, you simply need to use the merge method to combine the vux-loader configuration with your existing Webpack configuration.

There are two ways to access global methods:

1. Via Prototype: Mount to Vue.prototype to access the method using this.$method inside component options. This is the recommended approach for component-level convenience.
2. Via Vue Object: You can also attach methods directly to the Vue object (e.g., Vue.method = ...). While this makes the method globally available, you will need to import Vue from 'vue' inside every component where you want to use it.

The vux-loader is a Webpack loader for the VUX component library that enables features like on-demand loading (按需加载).

Important Notes:

• It is not a replacement for vue-loader; instead, it works alongside vue-loader.
• If you are using the vux2 template, you do not need to configure or use it manually.

You can use regular expressions in the library name key to match different import paths and use capture groups (${1}, ${2}, etc.) in the transform string to maintain folder structures.

{
    "plugins": [
        ["transform-imports", {
            "my-library\/?(((\\w*)?\\/?)*)": {
                "transform": "my-library/${1}/${member}",
                "preventFullImport": true
            }
        }]
    ]
}

A virtual component is a concept unique to VUX. It refers to a component that can be used in your templates without an explicit import statement. During the build process, vux-loader detects these components and replaces them with actual html code.

Key benefits include:

• On-demand loading: It allows for efficient resource management. For example, instead of importing all svg icons into a component, vux-loader can read the corresponding svg icon based on a component's attribute and inline it directly at compile time (e.g., using an x-icon component).
• Special attribute handling: It enables support for special attribute assignments or custom syntax that standard Vue components might not handle natively.

If you are using Babel 7+ and a .babelrc.js file, you can provide a function directly to the transform option for complex logic. The function receives importName and matches as arguments.

module.exports = {
    presets: ['@babel/env'],
    plugins: [
        ['transform-imports', {
            'my-library': {
                transform: function(importName, matches) {
                    return `my-library/etc/${importName.toUpperCase()}`;
                },
                preventFullImport: true,
            }
        }]
    ]
};