Maison  >  Article  >  interface Web  >  Comment ajouter vux dans vue ?

Comment ajouter vux dans vue ?

亚连
亚连original
2018-06-23 14:58:169480parcourir

Ajoutez vux via la commande npm install vux --save, configurez les informations dans le fichier de configuration approprié et pour les méthodes d'ajout de code spécifiques, veuillez vous référer à cet article

Introduction

Vux (prononcé [v'ju:z], identique à vues) est une bibliothèque de composants d'interface utilisateur mobile développée sur la base de WeUI et Vue (2.x), servant principalement les pages WeChat.

Basé sur webpack+vue-loader+vux, vous pouvez développer rapidement des pages mobiles avec vux-loader, vous pouvez personnaliser les styles dont vous avez besoin en fonction de WeUI.

vux-loader garantit que les composants sont utilisés à la demande, vous n'avez donc pas à vous soucier d'emballer éventuellement l'intégralité du code de la bibliothèque de composants vux.

vux ne dépend pas entièrement de WeUI, mais essayez de garder le style global de l'interface utilisateur proche des spécifications de conception de WeUI. L'objectif initial était de créer une bibliothèque de composants d'interface utilisateur mobile facile à utiliser, pratique et esthétique. Cependant, elle est encore loin de l'état idéal, donc tout le monde doit fournir des commentaires en temps opportun sur les problèmes et contribuer au code.

1. Commande pour ajouter vux

npm install vux --save

2. Configurer dans build/webpack.base.conf.js

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

3. Ajouter moins

npm install less less-loader --save-dev

4. Ajouter yaml-loader

npm install yaml-loader --save-dev

5. Ajoutez vux-loader

npm install vux-loader --save-dev

6. Ajoutez

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

à main.js, ce qui précède est ce que j'ai compilé pour tout le monde, j'espère. cela sera utile à l’avenir.

Articles connexes :

Comment utiliser l'outil de vérification du numéro de téléphone mobile PhoneUtils en javaScript

Fonctions associées dans l'applet WeChat Résumé ( tutoriel détaillé)

Comment implémenter la barre de progression de téléchargement dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn