在vue2.0中引用element-ui組件庫的方法

更新時間：2018年06月21日 14:45:49 作者：雨霖月寒

這篇文章主要介紹了在vue2.0中引用element-ui組件庫,需要的朋友可以參考下

在vue2.0中引用element-ui組件庫

element-ui是由餓了么團隊開發(fā)的一套基于 Vue 2.0 的桌面端組件庫。

安裝

npm i element-ui -S

引用完整的element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

需要注意的是，樣式文件需要單獨引入。

如果報錯，在 webpack.config.js 中配置 file_loader?？梢栽?rules 數(shù)組內直接增加下面這個配置項：

{
  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、如果報錯，在 webpack.config.js 中配置 file_loader。

可以在 rules 數(shù)組內直接增加下面這個配置項：

{
  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);
/* 或寫為
 * Vue.use(Button)
 * Vue.use(Select)
 */

總結

以上所述是小編給大家介紹的在vue2.0中引用element-ui組件庫的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
本篇文章主要介紹了詳解如何將 Vue-cli 改造成支持多頁面的 history 模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
vueJs函數(shù)readonly與shallowReadonly使用對比詳解
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
詳解Vue.js中的組件傳值機制
Vue.js 是一款流行的前端框架,它提供了一些方便的機制來管理組件之間的通信,其中包括組件傳值,本文將詳細介紹 Vue.js 中的組件傳值機制,包括父子組件傳值、兄弟組件傳值、跨級組件傳值等多種方式,需要的朋友可以參考下
2023-08-08
BuildAdmin elementPlus自定義表頭添加tooltip方法示例
這篇文章主要介紹了BuildAdmin elementPlus 自定義表頭,添加tooltip實現(xiàn)方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
element中的el-upload附件上傳與附件回顯
這篇文章主要介紹了element中的el-upload附件上傳與附件回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
前端全屏顯示解決方案分享(附圖文詳解)
這篇文章主要介紹了前端實現(xiàn)全屏顯示的三種解決方案,并針對每種方案的適用場景和優(yōu)缺點進行了詳細分析,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-01-01
vue的指令和插值問題匯總
Vue?是一套用于構建用戶界面的漸進式框架，Vue?的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合，這篇文章主要介紹了vue的指令和插值總結,需要的朋友可以參考下
2022-10-10
vue2 webpack proxy與nginx配置方式
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例
今天小編就為大家分享一篇vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vxe-Table開發(fā)中的各種坑以及避坑指南
vxe-table是一個全功能的Vue表格,滿足絕大部分對Table的一切需求,與任意組件庫完美兼容,下面這篇文章主要給大家介紹了關于Vxe-Table開發(fā)中各種坑以及避坑的相關資料,需要的朋友可以參考下
2022-09-09