Vue引入部分element.ui組件的一些小坑記錄
更新時間：2023年10月10日 15:46:43 作者：聽風娓娓道來
這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue引入部分element.ui組件的坑
做的這個vue項目使用的都是element.ui的組件，一開始沒注意，也為了省事，全部引入，后期因為為了項目輕量化，采用部分引入，踩了不少坑。
如何在路徑上不用#
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)
全部引入沒任何問題
部分引入
借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
一開始按照文檔
.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)運行報錯
后來參照別的方式
.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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue如何實現(xiàn)table表格置頂，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue應用程序中，表格是一個非常常見的組件，在這篇文章中，我們將介紹如何在Vue中進行表格的合并和拆分，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片滑動驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue項目build打包后部分樣式錯亂的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue3+element-plus動態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動態(tài)路由菜單示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
關(guān)于在vue中實現(xiàn)過渡動畫的代碼示例
Vue是一款流行的前端框架，支持過渡動畫的實現(xiàn)是其中的一項重要特性，在Vue中，使用過渡動畫可以為用戶提供更加友好的用戶體驗，下面我將為大家介紹一下子如何在Vue中實現(xiàn)過渡動畫,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue3中標簽form插件的使用的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)導航欄下拉菜單，帶展開收縮動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
完美解決vue引入BMapGL is not defined的問題
在Vue項目中使用BMapGL時,通過在src下添加bmp.js文件并配置密鑰（ak）,可以有效解決地圖API的應用問題,本方法是基于個人經(jīng)驗總結(jié),希望能為開發(fā)者提供參考和幫助2024-10-10
關(guān)于在vue-cli中使用微信自動登錄和分享的實例
本篇文章主要介紹了關(guān)于在vue-cli中使用微信自動登錄和分享的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06