Vue引入部分element.ui組件的一些小坑記錄
更新時(shí)間：2023年10月10日 15:46:43 作者：聽(tīng)風(fēng)娓娓道來(lái)
這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue引入部分element.ui組件的坑
做的這個(gè)vue項(xiàng)目使用的都是element.ui的組件，一開(kāi)始沒(méi)注意，也為了省事，全部引入，后期因?yàn)闉榱隧?xiàng)目輕量化，采用部分引入，踩了不少坑。
如何在路徑上不用#
index.js
mode: 'history',
全部引入方式
main.js
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' //樣式必須引入 Vue.use(ElementUI)
全部引入沒(méi)任何問(wèn)題
部分引入
借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
一開(kāi)始按照文檔
.babelrc修改如下
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}只用button，select做例子
main.js
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
//或者
Vue.use(Button)
Vue.use(Select)運(yùn)行報(bào)錯(cuò)
后來(lái)參照別的方式
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime", [
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}就ok了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue如何實(shí)現(xiàn)table表格置頂，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue應(yīng)用程序中，表格是一個(gè)非常常見(jiàn)的組件，在這篇文章中，我們將介紹如何在Vue中進(jìn)行表格的合并和拆分，感興趣的小伙伴可以了解一下2023-06-06
vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決
這篇文章主要介紹了vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue3+element-plus動(dòng)態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動(dòng)態(tài)路由菜單示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
關(guān)于在vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的代碼示例
Vue是一款流行的前端框架，支持過(guò)渡動(dòng)畫(huà)的實(shí)現(xiàn)是其中的一項(xiàng)重要特性，在Vue中，使用過(guò)渡動(dòng)畫(huà)可以為用戶提供更加友好的用戶體驗(yàn)，下面我將為大家介紹一下子如何在Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue3中標(biāo)簽form插件的使用的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航欄下拉菜單，帶展開(kāi)收縮動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
完美解決vue引入BMapGL is not defined的問(wèn)題
在Vue項(xiàng)目中使用BMapGL時(shí),通過(guò)在src下添加bmp.js文件并配置密鑰（ak）,可以有效解決地圖API的應(yīng)用問(wèn)題,本方法是基于個(gè)人經(jīng)驗(yàn)總結(jié),希望能為開(kāi)發(fā)者提供參考和幫助2024-10-10
關(guān)于在vue-cli中使用微信自動(dòng)登錄和分享的實(shí)例
本篇文章主要介紹了關(guān)于在vue-cli中使用微信自動(dòng)登錄和分享的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06