vue常用库整理

富文本

wangeditor

官网：wangeditor

日期处理类

moment.js

官网：moment.js

css样式重置

normalize.css

官网：normalize.css

svg图标

svg-sprite-loader

安装依赖

 npm install svg-sprite-loader -D 

用法

index.vue页面

<template>
  <svg class="svg-icon" :class="svgIcon">
    <use :href="'#' + svgIcon"></use>
  </svg>
</template>
<script>
import { computed } from "vue";
export default {
  name: "SvgIcon",
  props: {
    iconName: {
      type: String,
      default: "",
      required: true
    }
  },
  setup(props) {
    // svg 图标
    const svgIcon = computed(() => `icon-${props.iconName}`);
    return {
      svgIcon
    };
  }
};
</script>
<style lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
</style>

svg.js页面

// 获取当前svg目录所有为.svg结尾的文件
const context = require.context('./icon', false, /\.svg$/);
// 解析获取的.svg文件的文件名称，并返回
const requireAll = (requireContext) => {
  return requireContext.keys().map(requireContext);
};
requireAll(context);

 vue.config.js

chainWebpack: (config) => {
  // svg 图标解析
  // 内置的svg处理排除指定目录下的文件
  config.module.rule('svg').exclude.add(path.resolve('src/components/svgIcon/icon')).end()

  config.module
    .rule('svg-sprite-loader')
    .test(/\.svg$/)
    .include.add(path.resolve('src/components/svgIcon/icon'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]'
    })
}