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

element-ui是由餓了么團隊開發(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);

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

如果報錯，在 webpack.config.js 中配置 file_loader。可以在 rules 數(shù)組內(nèi)直接增加下面這個配置項：

{
 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ù)組內(nèi)直接增加下面這個配置項：

{
 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)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com