About Vue configuration guide (detailed tutorial)

Vux is a UI library of Vue.js. The official website is here. The configuration guide of the official document focuses on the list of technologies. I will simplify the Vux configuration process here. Interested friends, please follow the editor of Script House to learn together

Introduction

##Vux (pronunciation [v'ju:z], the same views) is a mobile UI component library developed based on WeUI and Vue (2.x), which mainly serves WeChat pages.

Based on webpack vue-loader vux can quickly develop mobile pages. With vux-loader, you can customize the styles you need based on WeUI.

vux-loader ensures that components are used on demand, so you don’t have to worry about eventually packaging the entire vux component library code.

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

Process

Vux is a UI library for Vue.js. The official website is here. The configuration guide of the official document focuses on the list of technologies. Let me simplify the Vux configuration process 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 Installation does not configure vux-loader. If not configured, the component is introduced like this:

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

After configuration, the component can be introduced like this:

import { AlertPlugin, ToastPlugin } from 'vux'

The configuration process is as follows:

In Modify webpack.base.config.js as follows, where webpackConfig is your previous configuration (that is, the one on the right side of module.export before, now saved as this variable):

const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
  options: {
    showVuxVersionInfo: false //关闭vux在console里输出的版本信息
  },
  plugins: [{
    name: 'vux-ui'
  }]
})

The above is what I compiled Everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to implement the web version of the calculator in JS

How to implement the parabolic trajectory of the ball using JS

How to implement binary tree traversal using JavaScript

The above is the detailed content of About Vue configuration guide (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!