Home  >  Article  >  Web Front-end  >  How to add vux in vue?

How to add vux in vue?

亚连
亚连Original
2018-06-23 14:58:169477browse

Add vux through the command npm install vux --save, configure the information in the relevant configuration file, and for specific code addition methods, please refer to this article

Introduction

Vux (pronounced [v'ju:z], the 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 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. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use the mobile phone number verification tool PhoneUtils in javaScript

Related functions in the WeChat applet Summary (detailed tutorial)

How to implement the download progress bar in the WeChat applet

The above is the detailed content of How to add vux in vue?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn