Vue前端项目-首页-svg图标

目录

 

1、安装依赖

2、组件全局注册

2.1、使用完整的vue.js

2.2 main.js文件到导入注册组件

2.3、icons的 index.js 文件

3、Svg组件

3.1、Svg组件文件

3.2、校验工具类

4、Svg配置

4.1、在 vue.config.js 中,新增svg配置

4.2、svg文件夹

5、使用

---

1、安装依赖

cnpm install svg-sprite-loader --save-dev

2、组件全局注册

2.1、使用完整的vue.js

注意：

在脚手架中，我们使用的 import Vue from 'vue'  这里的vue 默认使用的是vue.runtime.commmon.js, 这个文件可以理解为不完整的,我们在全局组件注册时会有问题, 因此我们需要使用完整的 vue.js

在 vue.config.js 中, 使用 'vue': 'vue/dist/vue.js' 指定完整的 vue.js

'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
    // 自动打开浏览器
    open: true,
    port: 8808
  },
  configureWebpack: (config) => {
    config.resolve = {
      extensions: ['.js', '.json', '.vue'],
      alias: {
        '@': path.resolve(__dirname, './src'),
        // 使用完整的vue.js
        'vue': 'vue/dist/vue.js'
      }
    }
  }
}

2.2 main.js文件到导入注册组件

这里 import 的文件也就是 src / assets / icons / index.js 文件