vue2.0 常用的 UI 庫實(shí)例講解
更新時(shí)間：2017年12月12日 09:56:07 作者：每天都要進(jìn)步一點(diǎn)點(diǎn)
這篇文章主要介紹了vue2.0 常用的 UI 庫實(shí)例講解，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
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使用, 請(qǐng)?jiān)赽uild/webpack.base.conf.js里參照如下代碼進(jìn)行配置：
build / webpack.base.conf.js
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原來的 module.exports 代碼賦值給變量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
實(shí)例：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]')
}
}
]
}
}
// 擴(kuò)展
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
// 增加一個(gè)plugins的配置到 .babelrc 中
{
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
]
]
}
總結(jié)
以上所述是小編給大家介紹的vue2.0 常用的 UI 庫實(shí)例講解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue自定義鍵盤實(shí)現(xiàn)車牌號(hào)的示例代碼
本文主要介紹了vue自定義鍵盤實(shí)現(xiàn)車牌號(hào)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
下面小編就為大家分享一篇vue判斷input輸入內(nèi)容全是空格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue.extend構(gòu)造器的詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
vuex?設(shè)計(jì)思路和實(shí)現(xiàn)方式
這篇文章主要介紹了vuex?設(shè)計(jì)思路和實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了在vue中import()語法不能傳入變量的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,也是vue的最突出的優(yōu)勢(shì),其實(shí) v-model 實(shí)際上是一個(gè)語法糖,本文將給大家介紹一下vue中v-model的實(shí)現(xiàn)原理,文中有相關(guān)的代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12
解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題
這篇文章主要介紹了解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Element-UI 多個(gè)el-upload組件自定義上傳不用上傳url并且攜帶自定義傳參(文件序號(hào))
有多個(gè)upload組件,每個(gè)都需要單獨(dú)上傳獲取文件（JS File類型）,不需要action上傳到指定url,自定義上傳動(dòng)作和http操作,下面通過本文給大家分享Element-UI 多個(gè)el-upload組件自定義上傳不用上傳url并且攜帶自定義傳參(文件序號(hào)),感興趣的朋友一起看看吧2024-06-06
Vue利用Mixin輕松實(shí)現(xiàn)代碼復(fù)用
Mixin，中文翻譯為"混入"，在Vue中是一種非常有用的功能，可以解決許多開發(fā)中的常見問題,下面就讓我們一起深入了解一下Mixin在Vue中解決了哪些問題吧2023-06-06
vue的$http的get請(qǐng)求要加上params操作
這篇文章主要介紹了vue的$http的get請(qǐng)求要加上params操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11