Detailed explanation of vue adding vux code method

Vux (pronounced [v'ju:z], same as views) is a mobile UI component library developed based on WeUI and Vue (2.x), mainly serving WeChat pages. Based on webpack+vue-loader+vux, you 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.

1. Command to add vux

npm install vux --save

2. Configure

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
//即将原来的module.exports 改为 const webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [{
  name: 'vux-ui'
 }]
})

in build/webpack.base.conf.js 3. Add less

npm install less less-loader --save-dev

4. Add yaml-loader

npm install yaml-loader --save-dev

5. Add vux-loader

npm install vux-loader --save-dev

6. Add

##

const FastClick = require('fastclick')
FastClick.attach(document.body)
import VueRouter from 'vue-router'
Vue.use(VueRouter)

to main.js. Related recommendations:

Picture This article explains in detail how to quickly build a Vue.js development environment

Detailed explanation of how Vue-cli implements cross-domain requests

Detailed explanation of Vue.js plug-in development

The above is the detailed content of Detailed explanation of vue adding vux code method. For more information, please follow other related articles on the PHP Chinese website!