vue-cli项目下引入vant组件

Myth丶恋晨 2023-08-17 15:39 137阅读 0赞

# 前言 #

Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。  
vant地址：[https://youzan.github.io/vant/\#/zh-CN/intro][https_youzan.github.io_vant_zh-CN_intro]

# 本章目标 #

#### 1.在vue-cli的项目中使用vant的相关组件 ####

# 项目构建 #

![image][]

#### 1.接下来我们在控制台输入安装vant的命令 ####

*  .npm i vant -S：这是简写形式。
 *  .npm install vant --save:这是完整写法。

#### 2.安装完成之后的结果 ####

![image][image 1]

#### 3.如果您不确定是否安装成功，那么我们可以去node\_modules中查看 ####

![image][image 2]

#### 4.接下来我们还需要安装一个插件，方便我们之后优雅的使用vant,在控制台输入npm i babel-plugin-import -D 或者 npm install babel-plugin-import --save-dev ####

![image][image 3]

#### 5.接下来我们去.babelrc中配置一下 ####

![image][image 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"]
        }
      }
    }

#### 6.使用vant,我们在src/components下新建一个VantComponent组件，代码如下： ####

![image][image 5]

<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.运行结果： ####

![image][image 6]

# 结尾 #

#### vue-cli对vant的使用并不难，很多移动端的项目都可以使用一些vue扩展的组件，例如像vant用来做商城类的项目最合适不过了，当然比较出名的还有vux,这一个组件可以说是比较的坑，组件有很多特别坑人的地方，附加地址vux:[https://vux.li/][https_vux.li]。 ####

[https_youzan.github.io_vant_zh-CN_intro]: https://youzan.github.io/vant/#/zh-CN/intro
[image]: /images/20230810/2d16bc1439ac43999f9d65d31737b702.png
[image 1]: /images/20230810/a9af8d2fd13544d3a2323fdbdc59ad3e.png
[image 2]: /images/20230810/44c95992631a48db9bc9e1c169fb5ec4.png
[image 3]: /images/20230810/9444628c32024e5db35c4d90c1176de6.png
[image 4]: /images/20230810/6daaeb7d15db41228ffcf2cdda035da5.png
[image 5]: /images/20230810/76800d70f8c64da69c0409db5be941db.png
[image 6]: /images/20230810/dbf879b39c78460db9a8c424aa34c213.png
[https_vux.li]: https://vux.li/