前言：以前我使用ui元件庫的時候，總是全域性匯入，但是到了實際開發中，為了提公升效能，都會需要我們使用按需匯入。
1、安裝
通過 npm 安裝
npm i vant -s
通過 yarn 安裝
yarn add vant
2、匯入
我們先來說一下以前的匯入方式 (全域性匯入)
這種匯入方式直接在 main.js 檔案下引入 以下兩個檔案就可以了
import vant from 『vant』；
import 『vant/lib/index.css』；
還要要記得：vue.use(vant)(安裝外掛程式)
接下來說一下我們今天的按需匯入
安裝外掛程式：babel-plugin-import 是一款 babel 外掛程式，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式
命令：npm i babel-plugin-import -d
然後找到 babel.config.js 檔案
將下面這段**複製進去
"plugins":[
["import",]
]
然後我們就可以按需匯入了
我這裡是單獨建了個 vant.js 的檔案，然後再將這個vant.js檔案引入到main.js中，你也可以直接在main.js檔案中這樣寫你要按需匯入的元件。
最後，很重要，一定要重啟專案
npm run serve
不然就會沒有樣式效果
就像我的這個按鈕一樣，沒有樣式效果，我剛開始也是納悶了很久，還以為是我**引入錯了。
重啟後：
最近又看到一句很好的話：當你的才華配不上你的野心時，就好好努力吧 ！
vantUI框架在vue專案中的應用踩坑
細節未完善。參考位址編輯方面的應用。1.訂單提交位址等元件的應用。使用的元件有如下 import from vant 主要是配貨位址編輯這塊 search result 詳細位址搜尋結果 所以去掉了，一是沒有做地理搜尋功能。而且發現模擬測試老是有bug，乾脆去掉。2.預設list屬性。要重新定義。配...
Vue專案按需打包Lodash
使用的是 webpack 模板 1.首先安裝 npm install lodash s e npm install lodash webpack plugin babel plugin lodash s e dev 第二行的部分外掛程式 webpack 模板已經預設安裝 2.修改 babelrc p...
vue 專案中的scoped
加了scoped的樣式，在打包後，就會給同乙個帶有scoped的style裡面的樣式增加一段特殊標識，看下面例子就曉得了 打包後在.css檔案中就成了如下 one h1 xx h2 xx h4 xx 這裡的 xx在同乙個scoped裡面的都一樣，不同的不一樣 這就是為什麼引入其他元件時，在帶有sco...