vue-element-admin 踩坑日记 01

vue-element-admin 是一个后台集成解决方案, 它基于 vue 和 element。它使用了最新的前端技术栈, 内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型, 提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。

通过vue-element-admin 的源代码学习掌握Vue的一些基础知识

SVG 图片加载
  1. src/components目录下创建文件夹结构如下 文件结构
    SvgIcon下创建index.vue文件内容如下:

    <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>
    
    
  2. 在src目录下创建文件夹结构如图
    文件结构
    svg 文件夹下放icon表情文件(.svg格式的文件)

index.js文件内容如下

    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'// svg组件
    
    // register globally
    Vue.component('svg-icon', SvgIcon)
    
    const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)

svgo.yml文件内容如下

# replace default config

# multipass: true
# full: true

plugins:

  # - name
  #
  # or:
  # - name: false
  # - name: true
  #
  # or:
  # - name:
  #     param1: 1
  #     param2: 2

- removeAttrs:
    attrs:
      - 'fill'
      - 'fill-rule'

  1. 修改配置文件 package.json文件

在scriptes 属性下添加一行

  "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  1. 修改build目录下webpack.base.conf.js文件

修改module->rules下元素 如图示修改 文件结构

    {
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: [resolve('src/icons')],
      options: {
        symbolId: 'icon-[name]'
      }
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      exclude: [resolve('src/icons')],
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },