vue-cli項目下引入vant組件

前言

Vant是有贊前端團隊基於有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效率。目前已有近50個組件，這些組件被廣泛使用於有贊的各個移動端業務中。如果你需要開發一個移動商城，用 Vant 就再合適不過了。
vant地址：https://youzan.github.io/vant/#/zh-CN/intro

本章目標

在vue-cli的項目中使用vant的相關組件

項目構建

如果您還沒有搭建vue-cli項目，那么請參考https://www.cnblogs.com/jjgw/p/11334797.html這篇博客,搭建好的vue-cli項目結構如下：

1.接下來我們在控制台輸入安裝vant的命令

　　npm i vant -S：這是簡寫形式。

　　npm install vant --save:這是完整寫法。

2.安裝完成之后的結果

3.如果您不確定是否安裝成功，那么我們可以去node_modules中查看

4.接下來我們還需要安裝一個插件，方便我們之后優雅的使用vant,在控制台輸入npm i babel-plugin-import -D 或者 npm install babel-plugin-import --save-dev 

5.接下來我們去.babelrc中配置一下

babelrc代碼：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

6.使用vant,我們在src/components下新建一個VantComponent組件，代碼如下：

<template>
    <div>
      <van-button type="default">默認按鈕</van-button>
      <van-button type="primary">主要按鈕</van-button>
      <van-button type="info">信息按鈕</van-button>
      <van-button type="warning">警告按鈕</van-button>
      <van-button type="danger">危險按鈕</van-button>
    </div>
</template>

<script>
  import {Button} from 'vant'
  export default {
    name: 'VantComponent',
    //注冊組件
    components:{
      [Button.name]: Button
    }
  }
</script>

<style scoped>

</style>

 7.去src/router/index.js設置路由地址

import Vue from 'vue'
import Router from 'vue-router'
import  VantCom from '@/components/VantComponent'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'VantCom',
      component: VantCom,
    }
  ]
})

 8.運行結果：

9.如果出現了結果的話，那么恭喜你vant中的組件你可以為所以為的使用了，好了本篇關於vant的使用就到此為止，有什么任何的問題都可以在下方評論.

總結

vue-cli對vant的使用並不難，很多移動端的項目都可以使用一些vue擴展的組件，例如像vant用來做商城類的項目最合適不過了，當然比較出名的還有vux,這一個組件可以說是比較的坑，組件有很多特別坑人的地方，附加地址vux:https://vux.li/。