Vue2，Vue3引入vant

vue2引入vant 

1. npm i vant -S
2. npm i babel-plugin-import -D
3. 找到后缀名为.babelrc的文件
    

   //在原本代码后面补充这段代码
   "plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]]//补充完后效果
   {"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"plugins": ["transform-vue-jsx", "transform-runtime", ["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]]
   }
   

4.  引入成功后，使用步骤如下
    

   <template><div class="home"><img alt="Vue logo" src="../assets/logo.png" @click="go"><van-button type="primary">主要按钮</van-button><van-button type="success">成功按钮</van-button><van-button type="default">默认按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button></div>
   </template><script>
   // @ is an alias to /src
   import { Button } from 'vant';
   export default {name: 'Home',methods:{go(){this.$router.push("/about");}},components:{"van-button":Button}
   }
   </script>
   

   ---

   vue3引入vant 

•  npm i vant@next -S
   

• main.js / main.ts中引入
   

  import Vant from 'vant';
  import 'vant/lib/index.css';
  createApp(App).use(store).use(Vant).use(router).mount("#app");

•  组件中使用

  <template><div class="home"><img alt="Vue logo" src="../assets/logo.png" @click="go"><van-button type="primary">主要按钮</van-button><van-button type="success">成功按钮</van-button><van-button type="default">默认按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button></div>
  </template><script>
  // @ is an alias to /src
  import { Button } from 'vant';
  export default {name: 'Home',methods:{go(){this.$router.push("/about");}}
  }
  </script>