Heim > Web-Frontend > js-Tutorial > Hauptteil

Was sind die häufig verwendeten UI-Bibliotheken in vue2.0?

亚连
Freigeben: 2018-06-21 11:59:40
Original
1649 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Beispiele für häufig verwendete UI-Bibliotheken in vue2.0 vorgestellt. Er ist sehr gut und hat Referenzwert.

1.mint -ui

Installation:

npm install mint-ui --save
Nach dem Login kopieren

Verwendung:

main.js

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

2.vux

Installation:

npm install vux --save
npm install vux-loader --save
Nach dem Login kopieren

Verwendung:

vux2 muss mit vux-loader verwendet werden, siehe folgenden Code in build/webpack.base .conf.js Konfigurieren:

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

Instanz: 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']
})
Nach dem Login kopieren

3.weex-ui

Installieren:

npm install weex-ui --save
Nach dem Login kopieren

Verwenden:

Um nicht alle Komponenten zu packen, müssen Sie babel-plugin-component verwenden, um nur die erforderliche Komponentenverpackung einzuführen.

npm i babel-plugin-component -D
Nach dem Login kopieren

.babelrc

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

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So implementieren Sie ein Zahlenvergleichsspiel mit Javascript

So rufen Sie Vuex auf, um Schnittstellendaten in Vue zu speichern. js

So erzielen Sie den Select-All-Cancel-Effekt in JavaScript

So erzielen Sie den Effekt des linken Menüs mit JavaScript

Das obige ist der detaillierte Inhalt vonWas sind die häufig verwendeten UI-Bibliotheken in vue2.0?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage