Vue中使用SVG作为边框

首先我们看下目录结构

image.png

1、定义borderBox组件

2、全局注册组件

• 1、新建一个index.js文件

import borderBox110 from "./borderBox110";

// 这里是重点
export default function (Vue) {
    Vue.component(borderBox110.name, borderBox110)
}

• 2、在外部同样定义一个index.js文件，用来全局注册

import Vue from 'vue'

import borderBox110 from "@/components/borderBox/borderBox1/index";

Vue.use(borderBox110)

• 2、在main.js中引入刚才新建的index.js文件

import './components/borderBox/index'

3、使用
在其他组件中我们可以直接使用便签即可

 
    

      测试
    
  

4、显示

image.png