vue vue-cli 引入vant組件及配置

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

1.cmd控制台輸入安裝vant的命令

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

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

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

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

4.接下來我們去.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"]
    }
  }
}

　HelloWorld.vue頁面代碼　

<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: 'HelloWorld',
    //注冊組件
    components:{
      [Button.name]: Button
    }
  }
</script>
 
<style scoped>
 
</style>