Vue.js+Koa2移動電商實戰2

來源:互聯網
上載者:User

標籤:建議   頁面   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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.