vue2.0 常用的 UI 库实例讲解


Posted in Javascript onDecember 12, 2017

1.mint-ui

安装:

npm install mint-ui --save

使用:

main.js

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

2.vux

安装:

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

使用:

vux2必须配合vux-loader使用, 请在build/webpack.base.conf.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']
})

实例: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

安装:

npm install weex-ui --save

使用:

为了不打包所有的组件,你需要使用 babel-plugin-component 来只引入需要的组件打包。

npm i babel-plugin-component -D

.babelrc

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

总结

以上所述是小编给大家介绍的vue2.0 常用的 UI 库实例讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript jQuery插件练习
Dec 24 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
常规表格多表头查询示例
Feb 21 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
C#实现将一个字符转换为整数
Dec 12 #Javascript
vue2.0 和 animate.css的结合使用
Dec 12 #Javascript
实例分析JS与Node.js中的事件循环
Dec 12 #Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 #Javascript
JS中精巧的自动柯里化实现方法
Dec 12 #Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 #Javascript
分析JS中this引发的bug
Dec 12 #Javascript
You might like
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python实现rsa加密实例详解
2017/07/19 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
pytorch实现线性拟合方式
2020/01/15 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
2014年网络管理员工作总结
2014/12/01 职场文书
幼儿园感谢信
2015/01/21 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
教师节主题班会教案
2015/08/17 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL