在vue2.0中引用element-ui組件庫的方法
更新時間：2018年06月21日 14:45:49 作者：雨霖月寒
這篇文章主要介紹了在vue2.0中引用element-ui組件庫,需要的朋友可以參考下
在vue2.0中引用element-ui組件庫
element-ui是由餓了么團(tuán)隊(duì)開發(fā)的一套基于 Vue 2.0 的桌面端組件庫。
官網(wǎng)： http://element.eleme.io/
安裝
npm i element-ui -S
引用完整的element-ui
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
需要注意的是，樣式文件需要單獨(dú)引入。
如果報(bào)錯，在 webpack.config.js 中配置 file_loader?？梢栽?rules 數(shù)組內(nèi)直接增加下面這個配置項(xiàng)：
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
按需引入組件
1、安裝 babel-plugin-component 插件：
npm install babel-plugin-component -D
2、修改 .babelrc 配置文件
將
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
改為：
{
"presets": [["env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3、如果報(bào)錯，在 webpack.config.js 中配置 file_loader。
可以在 rules 數(shù)組內(nèi)直接增加下面這個配置項(xiàng)：
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
4、使用組件
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或?qū)憺?
* Vue.use(Button)
* Vue.use(Select)
*/
總結(jié)
以上所述是小編給大家介紹的在vue2.0中引用element-ui組件庫的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
本篇文章主要介紹了詳解如何將 Vue-cli 改造成支持多頁面的 history 模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vueJs函數(shù)readonly與shallowReadonly使用對比詳解
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue.js 是一款流行的前端框架,它提供了一些方便的機(jī)制來管理組件之間的通信,其中包括組件傳值,本文將詳細(xì)介紹 Vue.js 中的組件傳值機(jī)制,包括父子組件傳值、兄弟組件傳值、跨級組件傳值等多種方式,需要的朋友可以參考下2023-08-08
BuildAdmin elementPlus自定義表頭添加tooltip方法示例
這篇文章主要介紹了BuildAdmin elementPlus 自定義表頭,添加tooltip實(shí)現(xiàn)方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了element中的el-upload附件上傳與附件回顯方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了前端實(shí)現(xiàn)全屏顯示的三種解決方案,并針對每種方案的適用場景和優(yōu)缺點(diǎn)進(jìn)行了詳細(xì)分析,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
Vue?是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，Vue?的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合，這篇文章主要介紹了vue的指令和插值總結(jié),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue使用ajax獲取后臺數(shù)據(jù)進(jìn)行顯示的示例
今天小編就為大家分享一篇vue使用ajax獲取后臺數(shù)據(jù)進(jìn)行顯示的示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vxe-table是一個全功能的Vue表格,滿足絕大部分對Table的一切需求,與任意組件庫完美兼容,下面這篇文章主要給大家介紹了關(guān)于Vxe-Table開發(fā)中各種坑以及避坑的相關(guān)資料,需要的朋友可以參考下2022-09-09