vue-cli項目下引入vant組件

前言

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

本章目標

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

項目構建

若是您尚未搭建vue-cli項目，那麼請參考http://www.javashuo.com/article/p-xrevjarf-bd.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/。