詳解Vue與element-ui整合方式
一、Vue與element-ui整合
element-ui官網(wǎng)介紹很詳細(xì)，這里摘抄官網(wǎng)的融入方式：
1.安裝element-ui:
npm i element-ui -S
2.引入ElementUI:
分為全部引入和部分引入，因為全部引入文件體積太大，這里直接部分引入：
按需引入，需要借助一個插件，安裝插件:
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的代碼，這里需要注意的是，我們原本項目中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';注冊組件:
Vue.component(Button.name, Button); Vue.component(Select.name, Select);
或者:
* 或?qū)憺? * Vue.use(Button) * Vue.use(Select) */
**注意：**由于label版本等問題，按照官網(wǎng)的操作后，vue-cli工程可能會發(fā)生啟動報錯，可參考這篇文章進(jìn)行版本的設(shè)置和修改：http://chabaoo.cn/article/177207.htm
4.使用組件渲染UI效果
使用element-ui后，所有的組件都可以使用element-ui進(jìn)行界面渲染了，使用哪個組件，在官網(wǎng)中找到對應(yīng)的組件介紹，使用即可。以Button為例：
劃到最下面，還有Attributes和函數(shù)的介紹
說明：按需引入element-ui后，無需再關(guān)注引入哪個css樣式了，會按照使用的組件，自動引入相關(guān)的樣式
到此這篇關(guān)于Vue與element-ui整合的文章就介紹到這了,更多相關(guān)Vue與element-ui整合內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 報錯TypeError: this.$set is not a function 的解決方法
這篇文章主要介紹了Vue 報錯TypeError: this.$set is not a function 的解決方法，分享給大家，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Vue 解決在element中使用$notify在提示信息中換行問題
這篇文章主要介紹了Vue 解決在element中使用$notify在提示信息中換行問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue3 實現(xiàn)雙盒子定位Overlay的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)組件值的累加，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了淺談vue項目打包優(yōu)化策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇淺談在vue中使用mint-ui swipe遇到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了如何寫一個Vue loading 插件，幫助大家更好的理解和學(xué)習(xí)vue 插件的相關(guān)知識，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue中v-html圖片過大導(dǎo)致溢出的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
近日項目中需要使用信息提示框的功能,ui組件庫使用的是字節(jié)的arco-design-vue,看了一下,現(xiàn)有的Message不滿足要是需求,直接使用message組件的話,改樣式太麻煩,所以本文就本就介紹了基于Vue3+ts封裝一個簡單版的Message組件,需要的朋友可以參考下2023-09-09