詳解Vue與element-ui整合方式
一、Vue與element-ui整合
element-ui官網(wǎng)介紹很詳細(xì)，這里摘抄官網(wǎng)的融入方式：
1.安裝element-ui:
npm i element-ui -S
2.引入ElementUI:
分為全部引入和部分引入，因?yàn)槿恳胛募w積太大，這里直接部分引入：
按需引入，需要借助一個(gè)插件，安裝插件:
npm install babel-plugin-component -D
修改babel.config.js文件:
(注意:官網(wǎng)寫的修改babelrc文件，新版本vue-cli修改babel.config.js文件，element-ui官網(wǎng)更新比較慢，所以說的還是舊版本文件)
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}上述代碼是官網(wǎng)上修改babel.config.js的代碼，這里需要注意的是，我們?cè)卷?xiàng)目中babel.config.js里的內(nèi)容，不要去掉，而是追加上面的這些代碼到babel.config.js里面，最終整合后的babel.config.js的代碼如下:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["es2015", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}3.按需引入ElementUI元素即可
比如，引入Button和Select，則在main.js中:
引入組件：
mport { Button, Select } from 'element-ui';注冊(cè)組件:
Vue.component(Button.name, Button); Vue.component(Select.name, Select);
或者:
* 或?qū)憺? * Vue.use(Button) * Vue.use(Select) */
**注意：**由于label版本等問題，按照官網(wǎng)的操作后，vue-cli工程可能會(huì)發(fā)生啟動(dòng)報(bào)錯(cuò)，可參考這篇文章進(jìn)行版本的設(shè)置和修改：http://www.fzitv.net/article/177207.htm
4.使用組件渲染UI效果
使用element-ui后，所有的組件都可以使用element-ui進(jìn)行界面渲染了，使用哪個(gè)組件，在官網(wǎng)中找到對(duì)應(yīng)的組件介紹，使用即可。以Button為例：
劃到最下面，還有Attributes和函數(shù)的介紹
說明：按需引入element-ui后，無需再關(guān)注引入哪個(gè)css樣式了，會(huì)按照使用的組件，自動(dòng)引入相關(guān)的樣式
到此這篇關(guān)于Vue與element-ui整合的文章就介紹到這了,更多相關(guān)Vue與element-ui整合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue移動(dòng)端項(xiàng)目vant組件庫之tag詳解
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目vant組件庫之tag詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
el-table?動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法
本文主要介紹了el-table?動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue中混入mixin的理解和應(yīng)用，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實(shí)現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09
vue路由$router.push()使用query傳參的實(shí)際開發(fā)使用
在vue項(xiàng)目中我們用函數(shù)式編程this.$router.push跳轉(zhuǎn),用query傳遞一個(gè)對(duì)象時(shí)要把這個(gè)對(duì)象先轉(zhuǎn)化為字符串,然后在接收的時(shí)候要轉(zhuǎn)化為對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue路由$router.push()使用query傳參的實(shí)際開發(fā)使用,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了安裝VUE-CLI一直失敗的排錯(cuò)過程及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要還是針對(duì) Vue.js 2.x 版本，畢竟接下來一段時(shí)間，Vue.js 2.x 還是我們工作中的主流版本，對(duì)vue.js性能優(yōu)化技巧相關(guān)知識(shí)感興趣的朋友一起看看吧2021-09-09
Vue 中如何將函數(shù)作為 props 傳遞給組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 中如何將函數(shù)作為 props 傳遞給組件的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
這篇文章給大家分享了基于vue實(shí)現(xiàn)一個(gè)簡單的MVVM框架的相關(guān)內(nèi)容，有需要的朋友們可以參考學(xué)習(xí)下。2018-08-08
Vue Element前端應(yīng)用開發(fā)之根據(jù)ABP后端接口實(shí)現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息，實(shí)現(xiàn)對(duì)前端界面的開發(fā)工作。2021-05-05