詳解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://m.fzitv.net/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移動端項目vant組件庫之tag詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了el-table?動態(tài)合并不定項多級表頭的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue中混入mixin的理解和應(yīng)用，對vue感興趣的同學(xué)，可以參考下2021-05-05
使用vue-router與v-if實現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09
vue路由$router.push()使用query傳參的實際開發(fā)使用
在vue項目中我們用函數(shù)式編程this.$router.push跳轉(zhuǎn),用query傳遞一個對象時要把這個對象先轉(zhuǎn)化為字符串,然后在接收的時候要轉(zhuǎn)化為對象,下面這篇文章主要給大家介紹了關(guān)于vue路由$router.push()使用query傳參的實際開發(fā)使用,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了安裝VUE-CLI一直失敗的排錯過程及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要還是針對 Vue.js 2.x 版本，畢竟接下來一段時間，Vue.js 2.x 還是我們工作中的主流版本，對vue.js性能優(yōu)化技巧相關(guān)知識感興趣的朋友一起看看吧2021-09-09
Vue 中如何將函數(shù)作為 props 傳遞給組件的實現(xiàn)代碼
這篇文章主要介紹了Vue 中如何將函數(shù)作為 props 傳遞給組件的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章給大家分享了基于vue實現(xiàn)一個簡單的MVVM框架的相關(guān)內(nèi)容，有需要的朋友們可以參考學(xué)習(xí)下。2018-08-08
Vue Element前端應(yīng)用開發(fā)之根據(jù)ABP后端接口實現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息，實現(xiàn)對前端界面的開發(fā)工作。2021-05-05