What are the commonly used UI libraries in vue2.0?
This article mainly introduces the examples of commonly used UI libraries in vue2.0. It is very good and has reference value. Friends in need can refer to it
1.mint-ui
Installation:
npm install mint-ui --save
Use:
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
Usage:
vux2 must be used with vux-loader, please refer to the following code in build/webpack.base.conf.js Configure:
build / webpack.base.conf.js
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})Instance: 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
Use:
In order not to package all components, you need to use babel-plugin-component to only introduce the required component packaging.
npm i babel-plugin-component -D
.babelrc
// 增加一个plugins的配置到 .babelrc 中
{
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
]
]
}The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement a number matching game using javascript
How to call vuex to store interface data in vue.js
How to achieve the select-all-cancel effect in JavaScript
How to achieve the left menu effect using JavaScript
The above is the detailed content of What are the commonly used UI libraries in vue2.0?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Why does the Elden Ring UI keep showing up?
Mar 11, 2024 pm 04:31 PM
In Elden's Ring, the UI page of this game will be automatically hidden after a period of time. Many players do not know how the UI is always displayed. Players can select the gauge display configuration in the display and sound configuration. Click to turn it on. Why does the Elden Ring UI keep displaying? 1. First, after we enter the main menu, click [System Configuration]. 2. In the [Display and Sound Configuration] interface, select the meter display configuration. 3. Click Enable to complete.
Summary of the five most popular Go language libraries: essential tools for development
Feb 22, 2024 pm 02:33 PM
Summary of the five most popular Go language libraries: essential tools for development, requiring specific code examples. Since its birth, the Go language has received widespread attention and application. As an emerging efficient and concise programming language, Go's rapid development is inseparable from the support of rich open source libraries. This article will introduce the five most popular Go language libraries. These libraries play a vital role in Go development and provide developers with powerful functions and a convenient development experience. At the same time, in order to better understand the uses and functions of these libraries, we will explain them with specific code examples.
Internationalization library in PHP8.0
May 14, 2023 pm 05:51 PM
Internationalization library in PHP8.0: UnicodeCLDR and Intl extensions With the process of globalization, the development of cross-language and cross-region applications has become more and more common. Internationalization is an important part of achieving this goal. In PHP8.0, UnicodeCLDR and Intl extensions were introduced, both of which provide developers with better internationalization support. UnicodeCLDRUnicodeCLDR(CommonLocaleDat
Easily master the Pillow library installation method: guide sharing
Jan 17, 2024 am 08:56 AM
The Pillow library is a very powerful image processing library in Python. It is developed based on PythonImagingLibrary (PIL) and is optimized and expanded on its basis. The Pillow library provides a wealth of image processing functions, which can process various types of image files, and perform image editing, merging, filter processing and other operations. This article will provide you with an installation guide for the Pillow library to help you easily master this powerful image processing tool. 1. Install P
When learning Python, how can you not master these 22 commonly used libraries?
Apr 12, 2023 am 10:25 AM
What is the current usage status of Python in various industries around the world? This question is the original intention of me writing this article. I found the 22 most commonly used Python packages, hoping to give you some inspiration. First, I listed the most downloaded Python packages on PyPI in the past year. Let’s take a look at what these packages do, how they relate to each other, and why they’re so popular. 1. Urllib3.893 billion downloads Urllib3 is an HTTP client for Python. It provides many functions that are not available in the Python standard library. Thread-safe Connection pooling Client-side SSL/TLS authentication Using multipart encoding
What are the common UI component libraries in Vue?
Jun 11, 2023 am 11:47 AM
Vue is a popular JavaScript framework that uses a component-based approach to build web applications. In the Vue ecosystem, there are many UI component libraries that can help you quickly build beautiful interfaces and provide rich functions and interactive effects. In this article, we will introduce some common VueUI component libraries. ElementUIElementUI is a Vue component library developed by the Ele.me team. It provides developers with a set of elegant,
Two Chinese Google researchers released the first purely visual 'mobile UI understanding' model, four major tasks to refresh SOTA
Apr 12, 2023 pm 04:40 PM
For AI, "playing with mobile phones" is not an easy task. Just identifying various user interfaces (UI) is a big problem: not only must the type of each component be identified, but also the symbols used , position to determine the function of the component. Understanding the UI of mobile devices can help realize various human-computer interaction tasks, such as UI automation. Previous work on mobile UI modeling usually relies on the view hierarchy information of the screen, directly utilizing the structural data of the UI, and thereby bypassing the problem of identifying components starting from the screen pixels. However, view hierarchy is not available in all scenarios. This method usually outputs erroneous results due to missing object descriptions or misplaced structural information, so even if you use
Comparison of Java libraries for XML parsing: Finding the best solution
Mar 09, 2024 am 09:10 AM
Introduction XML (Extensible Markup Language) is a popular format for storing and transmitting data. Parsing XML in Java is a necessary task for many applications, from data exchange to document processing. To parse XML efficiently, developers can use various Java libraries. This article will compare some of the most popular XML parsing libraries, focusing on their features, functionality, and performance to help developers make an informed choice. DOM (Document Object Model) parsing library JavaXMLDOMAPI: a standard DOM implementation provided by Oracle. It provides an object model that allows developers to access and manipulate XML documents. DocumentBuilderFactoryfactory=D
