Home > Web Front-end > JS Tutorial > Detailed explanation of vue adding vux code method

Detailed explanation of vue adding vux code method

小云云
Release: 2017-12-12 14:38:06
Original
1815 people have browsed it

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'
 }]
})
Copy after login


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


npm install less less-loader --save-dev
Copy after login


4. Add yaml-loader


npm install yaml-loader --save-dev
Copy after login


5. Add vux-loader


npm install vux-loader --save-dev
Copy after login


6. Add


##

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


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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template