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