詳解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)更新比較慢，所以說(shuō)的還是舊版本文件)
{
"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èn)題，按照官網(wǎng)的操作后，vue-cli工程可能會(huì)發(fā)生啟動(dòng)報(bào)錯(cuò)，可參考這篇文章進(jìn)行版本的設(shè)置和修改：http://www.dbjr.com.cn/article/177207.htm
4.使用組件渲染UI效果
使用element-ui后，所有的組件都可以使用element-ui進(jìn)行界面渲染了，使用哪個(gè)組件，在官網(wǎng)中找到對(duì)應(yīng)的組件介紹，使用即可。以Button為例：
劃到最下面，還有Attributes和函數(shù)的介紹
說(shuō)明：按需引入element-ui后，無(wú)需再關(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 報(bào)錯(cuò)TypeError: this.$set is not a function 的解決方法
這篇文章主要介紹了Vue 報(bào)錯(cuò)TypeError: this.$set is not a function 的解決方法，分享給大家，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Vue 解決在element中使用$notify在提示信息中換行問(wèn)題
這篇文章主要介紹了Vue 解決在element中使用$notify在提示信息中換行問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
Vue3 實(shí)現(xiàn)雙盒子定位Overlay的示例
這篇文章主要介紹了Vue3 實(shí)現(xiàn)雙盒子定位Overlay的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)組件值的累加，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了淺談vue項(xiàng)目打包優(yōu)化策略，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
淺談在vue中使用mint-ui swipe遇到的問(wèn)題
今天小編就為大家分享一篇淺談在vue中使用mint-ui swipe遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了如何寫一個(gè)Vue loading 插件，幫助大家更好的理解和學(xué)習(xí)vue 插件的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-11-11
Vue中v-html圖片過(guò)大導(dǎo)致溢出的問(wèn)題及解決
這篇文章主要介紹了Vue中v-html圖片過(guò)大導(dǎo)致溢出的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
基于Vue3+ts封裝一個(gè)簡(jiǎn)單版的Message組件
近日項(xiàng)目中需要使用信息提示框的功能,ui組件庫(kù)使用的是字節(jié)的arco-design-vue,看了一下,現(xiàn)有的Message不滿足要是需求,直接使用message組件的話,改樣式太麻煩,所以本文就本就介紹了基于Vue3+ts封裝一個(gè)簡(jiǎn)單版的Message組件,需要的朋友可以參考下2023-09-09