Maison > interface Web > js tutoriel > le corps du texte

Quelles sont les bibliothèques d'interface utilisateur couramment utilisées dans vue2.0 ?

亚连
Libérer: 2018-06-21 11:59:40
original
1649 Les gens l'ont consulté

Cet article présente principalement les exemples de bibliothèques d'interface utilisateur couramment utilisées dans vue2.0. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

1.mint. -ui

Installation :

npm install mint-ui --save
Copier après la connexion

Utilisation :

main.js

// MintUI组件库
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
Copier après la connexion

2 .vux

Installation :

npm install vux --save
npm install vux-loader --save
Copier après la connexion

Utilisation :

vux2 doit être utilisé avec vux-loader, veuillez le définir dans build/ webpack.base.conf Reportez-vous au code suivant pour la configuration en .js :

build / webpack.base.conf.js
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
 plugins: ['vux-ui']
})
Copier après la connexion

Exemple : webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
// 添加 vux-loader
const vuxLoader = require('vux-loader')
function resolve (dir) {
 return path.join(__dirname, '..', dir)
}
// 原来的 module.exports 代码赋值给变量 webpackConfig
const webpackConfig = {
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
   ? config.build.assetsPublicPath
   : config.dev.assetsPublicPath
 },
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 }
}
// 扩展
module.exports = vuxLoader.merge(webpackConfig, {
 plugins: ['vux-ui']
})
Copier après la connexion

3 .weex-ui

Installation :

npm install weex-ui --save
Copier après la connexion

Utilisation :

Afin de ne pas empaqueter tous les composants, vous devez utiliser babel-plugin -component pour introduire uniquement l'emballage du composant requis.

npm i babel-plugin-component -D
Copier après la connexion

.babelrc

// 增加一个plugins的配置到 .babelrc 中
{
 "plugins": [
  [
   "component",
   {
    "libraryName": "weex-ui",
    "libDir": "packages"
   }
  ]
 ]
}
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter un jeu de correspondance de nombres en utilisant javascript

Comment appeler vuex pour stocker les données d'interface dans vue. js

Comment obtenir l'effet sélectionner tout-annuler en JavaScript

Comment obtenir l'effet de menu de gauche en utilisant JavaScript

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal