標籤:建議 頁面 div 實戰 現在 pack 能力 Koa 很多
引入Vant組件庫
在工作中,有很多自己的組件庫,但是在開發這些前都會選擇一套穩定的開源的作為輪子作為基礎(大公司是有能力造自己輪子的)。因為我們要作電商系統,所以選擇有贊的Vant作為Vue的基本組件和樣式組件。
安裝Vant
npm i vant -S
安裝好後,看一下我們的package.json檔案,並確認一下版本。
引入Vant的第一種方法(不推薦)
安裝好vant後,可以使用以前常用的方法進行引入-這是一種全域引入的方式。
直接在src/main.js進行全域引入。
import Vant from ‘vant‘import ‘vant/lib/vant-css/index.css‘Vue.use(vant)
簡單的三行代碼已經可以把Vant引入進來了,但是這並不夠優雅,也使得最後打包發布時會增加包的大小,Vue的SPA首屏開啟時本來就有些慢,所以不建議使用這種方法進行引入。
優雅的引入Vant
vant是支援babel-plugin-import引入的,它可以讓我們按需引入組件模組,並且不用管理我們的樣式,現在Vue項目組件庫的主流引入方法。
安裝babel-plugin-import
npm i babel-plugin-import -D
在.babelrc中配置plugins(外掛程式)
"plugins": [ "transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}] ]
按需使用Vant組件
我們設定好.babelrc後,就可以按需引入Vant架構了。比如現在我們引入一個Button
組件.
在src/main.js裡加入下面的代碼:
import { Button } from ‘vant‘Vue.use(Button)
有了這段代碼之後,我們就可以在需要的組件頁面中加入Button
了.
<van-button type="primary">主要按鈕</van-button>
Vue.js+Koa2移動電商實戰2