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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
动态加载js的方法汇总
Feb 13 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 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 URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Python中的类与对象之描述符详解
2015/03/27 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
实习护士自我鉴定
2013/10/13 职场文书
施工安全承诺书
2014/05/22 职场文书
高三励志标语
2014/06/05 职场文书
班训口号大全
2014/06/18 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
八年级历史教学反思
2016/02/19 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS