vue2.0 常用的 UI 庫實(shí)例講解
更新時間：2017年12月12日 09:56:07 作者：每天都要進(jìn)步一點(diǎn)點(diǎn)
這篇文章主要介紹了vue2.0 常用的 UI 庫實(shí)例講解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
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里參照如下代碼進(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
// 增加一個plugins的配置到 .babelrc 中
{
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
]
]
}
總結(jié)
以上所述是小編給大家介紹的vue2.0 常用的 UI 庫實(shí)例講解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue引入路徑正確但一直報錯問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報錯:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue-property-decorator用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue router 跳轉(zhuǎn)后回到頂部的實(shí)例
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
結(jié)合Vue控制字符和字節(jié)的顯示個數(shù)的示例
這篇文章主要介紹了結(jié)合Vue控制字符和字節(jié)的顯示個數(shù)的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
眾所周知，一個項(xiàng)目在開發(fā)、測試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾，這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過官方也提供了相應(yīng)的配置方法，本文就來介紹一下2021-08-08
這篇文章主要介紹了vue?如何引入本地某個文件?require，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
解決vue2.0 element-ui中el-upload的before-upload方法返回false時submit(
這篇文章主要介紹了vue2.0 element-ui中el-upload的before-upload方法返回false時submit()不生效的解決方法，這里需要主要項(xiàng)目中用的element-ui是V1.4.3，感興趣的朋友參考下吧2018-08-08
詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題
這篇文章主要介紹了詳解vuex持久化插件解決瀏覽器刷新數(shù)據(jù)消失問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue中vue-router的使用說明(包括在ssr中的使用)
這篇文章主要介紹了vue中vue-router的使用說明(包括在ssr中的使用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05