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

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

Utilisation :

main.js

// MintUI组件库
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

2 .vux

Installation :

npm install vux --save
npm install vux-loader --save

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

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

3 .weex-ui

Installation :

npm install weex-ui --save

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

.babelrc

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

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!