Элегантное использование Svg в проектах vue

внешний интерфейс SVG Ресурсы изображений Vue.js
Элегантное использование Svg в проектах vue

github demo: гитхаб-адресЕсли это было полезно для вас, пожалуйста, дайте звезду...

фон сплетен

Эта статья в основном посвященаvue-cli3Возьмем в качестве примера построенный проект, поговорим о том, как более изящно использовать его в проектеsvg.

Как мы все знаем,vue-cli3Она запущена давно, это чувствует каждыйvue-cli3Приносит опыт нулевой конфигурации. Но это также приносит некоторые недостатки, то есть, если вам нужно изменить значение по умолчаниюloader, это будет более хлопотно.

Хорошо, по теме, рекомендуется взглянуть на Чжан Синьсю, прежде чем читать эту статью.Будущее должно быть жарким: внедрение технологии SVG Sprite, то мы в основном используем вышеупомянутыеsvgизuse, предыдущийvue-cli3Каталог построенного проекта, вы можете видеть, что зарезервирован только корневой каталогpublic/а такжеsrc/, можно сказать, очень чистый, вы можете создать его самостоятельно.

существуетsrc/components/Создать подSvgIconкомпоненты

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
  },
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

существуетsrc/создать следующийiconsкаталог, структура каталогов выглядит следующим образом:

svgКаталог в основном используется для храненияsvgфайл, посмотриindex.jsСодержимое функции заключается в регистрации компонента в глобале, которым удобно пользоваться:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

Конечно, если у вас есть собственные идеи или потребности, вы можете представить их отдельно, не регистрируя их глобально.

существуетmain.jsвведен в

В этом шаге сказать нечего.Если вам нужно зарегистрироваться в глобале, вам нужно ввести его в файл входа.

Ну а дальше самый важный шаг:

изменить значение по умолчаниюloader:

все могут идтиофициальный сайт vue-cli3Перейдите к конкретному руководству, здесь я говорю только о том, что нужно изменить.loaderИ конкретная реализация кода.

Первое, что следует отметить, это то, что поvue-cli3Построенный проект можно инициализировать, чтобы сделать множество вариантов, каталог, который я создал, более*.config.jsсуществуют в виде.

Создайте в корневом каталоге файл с именемvue.config.jsфайл, с ним связаны следующие операции, давайте посмотрим на его полный код:

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, './', dir)
}

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      const argv = process.argv
      const icourt = argv[argv.indexOf('--icourt-mode') + 1]

      args[0]['process.env'].MODE = `"${icourt}"`

      return args
    })
    // svg rule loader
    const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })

    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule('images')
    imagesRule.exclude.add(resolve('src/icons'))
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
  },
  configureWebpack: {
    devServer: {
      open: true,
      // https: true,
      proxy: {
        '/user': {
          target: 'https://devadminschool.icourt.cc',
        },
        '/live': {
          target: 'https://devadminschool.icourt.cc',
        },
      },
    },
  },
}

Игнорируйте нерелевантный код, сосредоточьтесь наsvg rule loaderНачинается комментарий, собственно, комментарий уже более подробный, то есть получить дефолтныйloaderи внести соответствующие изменения, в основном в том числеsvg-loader,images-loader,отvue-cli3базовый погрузчикЭти два можно найти вloaderконфигурация по умолчанию.

// 默认的svg loader...
webpackConfig.module
  .rule('svg')
    .test(/\.(svg)(\?.*)?$/)
    .use('file-loader')
      .loader('file-loader')
      .options({
        name: genAssetSubPath('img')
      })
      
// 默认的images loader...
webpackConfig.module
      .rule('images')
        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
        .use('url-loader')
          .loader('url-loader')
          .options(genUrlLoaderOptions('img'))

Как видно из кода, с которого я начал, я поставил значение по умолчаниюsvg loaderиспользуется в конфигурацииfile-loaderизменился наsvg-sprite-loader, и исключаетnode_modules, поставить по умолчаниюimages-loaderконфиг добавленsvg, и исключаетsrc/iconsсодержание.

как пользоваться?

  • SVG, который может быть сильно задан дизайном или изiconfontЗагрузите формат svg значка с открытым исходным кодом с официального сайта и скопируйте его наsrc/icons/svgПод содержанием;
  • нажмитеsvgПросмотр исходного кода, изменениеfillАтрибуты,fill="currentColor",илиfill="", если такого атрибута нет, то пофиг, так можно внешне управлять цветом значка, либо следить за цветом родительского элемента;
  • Обратите внимание, что имя svg такое же, как имя SvgIcon, взгляните на окончательное использование:
    будет использоваться здесьsrc/icons/svg/go-back.svgдокумент.

Суммировать:

Вышеприведенное относительно грубо, но навыки написания несовершенны.Наконец, пример демо-кода github прилагается: Этот проект также можно использовать как начальную структуру проекта со встроенным vue-router, vuex и т.д.

В этой статье в качестве примера используется проект, созданный vue-cli3.Предыдущий проект может напрямую модифицировать соответствующий загрузчик вручную.

гитхаб-адресЕсли это было полезно для вас, пожалуйста, дайте звезду...

Эта статья - первый пост, опубликованный на Наггетсах, новички уже обустроились, а старших прошу уделить больше внимания...

Категории