vue组件提取--SvgIcon组件

SvgIcon组件主要是整站所有的图标icon，提前成一个单独的组件。假如Nav.vue需要该组件，引用即可。由此可见，需要将SvgIcon.vue组件注册为全局组件，谁需要，谁引用。

一、将SvgIcon.vue注册为全局组件、

1、注册组件

//SvgIcon是组件名  { }里边是组件内容
Vue.component('SvgIcon',{
    template:`<div>我是SvgIcon组件</div>`,
    data(){
        return {
            msg:'hello'
        }
    }
})

因此，可将组件内容抽离出来单独的文件---SvgIcon.vue

2、抽离SvgIcon.vue组件

//SvgIcon.vue

<template>
  <div>
    //这是插入svg文件的 固定写法
    <!-- <svg :class="svgClass" aria-hidden="true">
      <use :xlink:href="name"></use>
    </svg>  -->

  </div>
</template>
<script>

3、将SvgIcon.vue注册为全局组件

在main.js文件里

//引入组件
import SvgIcon from "./SvgIcon.vue"
//注册组件  SvgIcon
Vue.component("SvgIcon", SvgIcon)
//解析./svg文件夹里的所有 .svg 文件
const req = require.context("./svg", false, /\.svg$/)
const requireAll = requireContext => {
    return requireContext.keys().map(requireContext)
}

//require.context(‘./svg’, false, /\.svg$/) 参数说明：
//第一个：目标文件夹
//第二个：是否遍历子级目录
//第三个：定义遍历文件规则

二、解析svg文件，需要在vue.config.js中配置如下

chainWebpack: config => {
                const svgRule = config.module.rule("svg")
                svgRule.uses.clear()
                svgRule
                        .use("svg-sprite-loader")
                        .loader("svg-sprite-loader")
                        .options({
                                symbolId: "icon-[name]",
                                include: ["./src/icons"]
                        })
        },

三、依赖，编译svg

npm install svg-sprite-loader -S