在vue中如何引入element ui

2021-08-13 21:57:22 字數 1246 閱讀 5778

element-ui是餓了麼團隊為

vue提供的

ui元件

,下面介紹如何在專案中引入與使用 借助

babel-plugin-component

,我們可以只引入需要的元件,以達到減小專案體積的目的。 首先

安裝 babel-plugin-component:

npm install babel-plugin-component -d 然後

,更改.babelrc檔案,

這個檔案是

es6語法的編譯器

1. vue-cli腳手架的

.babelrc檔案

2. // 此項指明,轉碼的規則

"presets": [

// env項是借助外掛程式

babel-preset-env

,下面這個配置說的是

babel

對es6,es7,es8

進行轉碼,並且設定

amd,commonjs

這樣的模組化檔案,不進行轉碼

["env", ],

// 下面這個是不同階段出現的

es語法,包含不同的轉碼外掛程式

"stage-2"

// 下面這個選項是引用外掛程式來處理**的轉換,

transform-runtime

用來處理全域性函式和優化

babel編譯

"plugins": ["transform-runtime"],

// 下面指的是在生成的檔案中,不產生注釋

"comments": false,

// 下面這段是在特定的環境中所執行的轉碼規則,當環境變數是下面的

test

就會覆蓋上面的設定

"env": ]]

接下來,如果只想引入部分內容,就在

main.js

中新增**

import

element

from

'element-ui'

import

from

'element-ui'

vue.use

(element,)

vue.

use(

button)

vue.

use(

select)

element提供全域性的樣式這邊

size

選擇了small,

也可以選擇別的尺寸

ui元件具體的使用方式可以檢視官方文件

Vant 在vue中 按需引入和全部載入

因為我是測試練習vant的 demo分為 全部載入 和按需載入兩種方式 首先引入 官方文件 import vue from vue import from vant vue.use button 我的寫法 大家可以在計算屬性中列印一下你引入的元件,看看裡面有什麼了 關於在components 中 c...

記vue中引入cesium

因為個人原因,已經很久很久沒有寫過部落格了,但是學過的東西終歸還是要記錄滴,以下是在vue中引入cesium,具體步驟如下 一 首先安裝vue cli,因為之前接觸vue的時候都是自己手動配置webpack,感覺每一步都知道所以然,但是現在直接使用vue cli後確實是方便了很多,但是裡面好多的配置...

Vue中 引入使用 vue json views

專案開發過程中遇到展示 json 的場景,且 json 檔案體積過大,小則幾百kb。vue json views 即使載入 1m 左右的 json 文時,結合deep 深度限制,也能實現秒開的速度,元件壓所過後體積只有15.7kb,開啟gzip壓縮後只有4.74kb。1.示例及文件 位址 或 直接雙...