Quelles sont les bibliothèques d'interface utilisateur couramment utilisées dans vue2.0 ?-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-21 11:59:40

original

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

Copier après la connexion

Exemple : 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;]
})

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.