溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-06 10:08:03 來源：腳本之家 閱讀：247 作者：雨霖月寒 欄目：web開發(fā)

在vue2.0中引用element-ui組件庫(kù)

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

官網(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)錯(cuò)，在 webpack.config.js 中配置 file_loader?？梢栽?rules 數(shù)組內(nèi)直接增加下面這個(gè)配置項(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)錯(cuò)，在 webpack.config.js 中配置 file_loader。

可以在 rules 數(shù)組內(nèi)直接增加下面這個(gè)配置項(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組件庫(kù)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手