实现的效果：

自己写的代码：

<template>
  <div class="container">
    <div class="content">JsBarcode</div>
    <svg id="barcode"></svg>
  </div>
</template>

<script>
import JsBarcode from "jsbarcode";
export default {
  name: "XuexiKuangjiaJsbarcode",

  data() {
    return {};
  },

  mounted() {
    this.getBarcode();
  },

  methods: {
    getBarcode() {
      let options = {
        text: "123456789",
        displayValue: true,
        fontSize: 12,
        height: 40,
        // width: 1,
      };
      this.$nextTick(() => {
        JsBarcode("#barcode", "987654321", options);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .content {
    background-color: aquamarine;
    font-size: 20px;
  }
}
</style>

一、JsBarcode介绍

JsBarcode是：一个用JavaScript编写的条形码生成器。 它支持多种条形码格式，可在浏览器和Node.js中使用。

JsBarcode 官网

二、JsBarcode安装

在对应项目的终端中，输入如下代码，安装

npm install jsbarcode --save

三、页面引入使用

3.1 在二维码生成的页面中引入

import JsBarcode from "jsbarcode";

3.2 二维码生成的容器

在前面例子中 使用 <svg></svg>这个容器的。
二维码的容器有三个：

<canvas id="canvas"></canvas>
<img id="barcode"/>
<svg id="barcode"></svg>

3.3 生成二维码
可以将生成的条形码放在一个方法里面：

    getBarcode() {
      let options = {
        text: "123456789", 
        displayValue: true,
        fontSize: 12,
        height: 40,
        width: 1,
      };
      this.$nextTick(() => { //这个根据自己的代码 论情况写
        JsBarcode("#barcode", "987654321", options); 
        //#barcode 对应容器中的id
        //987654321 是条形码的携带的信息，和option中的text显示信息要区分
        //options:是条形码的配置信息
      });
    },

3.4 options 配置选择项

根据上述options 举例：

在HTML中申明options：
注意：这里条形码的类型是 upc 也要注意 value的格式 否则条形码会报错

四、存在的问题：

1、条形码总体的宽度，我现在只有调节每条的宽度来调节；

2、条形码的宽高生成就定好了，如果外面有个容器的话，条形码会超出外面的容器显示，影响布局，比如在flex 布局下的条形码。