What are the commonly used UI libraries in vue2.0?-JS Tutorial-php.cn

What are the commonly used UI libraries in vue2.0?

亚连

Release： 2018-06-21 11:59:40

Original

1657 people have browsed it

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

Copy after login

Use:

main.js

// MintUI组件库
import MintUI from &#39;mint-ui&#39;
import &#39;mint-ui/lib/style.css&#39;
Vue.use(MintUI)

Copy after login

2.vux

Installation:

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

Copy after login

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(&#39;vux-loader&#39;)
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
 plugins: [&#39;vux-ui&#39;]
})

Copy after login

Instance: webpack.base.conf.js

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

Copy after login

3.weex-ui

Installation :

npm install weex-ui --save

Copy after login

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

Copy after login

.babelrc

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

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!