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

2021-10-08 10:48:38 字數 1322 閱讀 3989

因為我是測試練習vant的 ; demo分為 全部載入 和按需載入兩種方式

首先引入: (官方文件):

import vue from 'vue';

import from 'vant';

vue.use(button);

我的寫法:

大家可以在計算屬性中列印一下你引入的元件,看看裡面有什麼了

關於在components 中 [cell.name] :cell 這種寫法 我想應該是這樣

一、如果屬性名稱是常量(固定值),獲取屬性值的方式有:

物件.屬性名稱

物件[屬性名稱]

二、如果屬性名稱是乙個變數(不固定值),獲取屬性值方式只能是:

物件[屬性名稱]

vue init webpack 專案名;

cnpm install vant -s

在main.js 中 以引入並使用

import vant from 'vant'

import 'vant/lib/index.css'

vue.use(vant);

-未修改之前的 .babelrc 檔案

}],"stage-2"

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

}

第三部: 安裝babel-plugin-import(這部是按需載入的時候需要用到的,如果你全部引入了 就不需要)

cnpm install babel-plugin-import -s

}],"stage-2"

],"plugins": ["transform-vue-jsx", "transform-runtime", ["import",]],

"env":

}}

第四.如果你安裝了babel-plugin-import 這個 然後需要把這個解除安裝掉, 然後重新專案; 在你解除安裝掉babel-plugin-import 這個的時候 .babelrc這個檔案也要恢復到一開始沒修改的樣子偶(就是上面的』'未修改之前的 .babelrc 檔案)

cnpm uninstall babel-plugin-import -s
接下來重啟專案就應該可以了

vant在Vue頁面內實現按需引入

參考 參考npm i vant sbabel plugin import 是一款 babel 外掛程式,它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式 安裝外掛程式 npm i babel plugin import d在.babelrc中配置plugins 外掛程式 plugin...

vue3 0 vant按需引入

首先安裝vant 然後 babel plugin import 是一款 babel 外掛程式,它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式 安裝外掛程式 npm i babel plugin import d 然後在 babel.config.js 中配置一下下 module.e...

在vue中如何引入element ui

element ui是餓了麼團隊為 vue提供的 ui元件 下面介紹如何在專案中引入與使用 借助 babel plugin component 我們可以只引入需要的元件,以達到減小專案體積的目的。首先 安裝 babel plugin component npm install babel plugi...