Vue封装组件并上传到npm的教程详解

<template>
	<div class="beva-loading">
		<img class="loading-icon" :src="imgSrc" alt="">
	</div>
</template>
<script>
	export default {
  name: 'Loading',
  props: {
    imgSrc: {
      type: String,
      default: ''
    },
  },
  data() {
		return {}
	}
}
</script>

import Loading from './src/Loading.vue'
 
Loading.install = function (Vue) { 
  Vue.component(Loading.name, Loading)
}
export default Loading

	.beva-loading {
	  background-color: rgba(0, 0, 0, 0.7);
	  border-radius: 0.4rem;
	  color: #ffffff;
	  position: fixed;
	  z-index: 99;
	  width: 7.46rem;
	  height: auto;
	  padding: 0.8rem;
	  text-align: center;
	  top: 20vh;
	  box-sizing: border-box;
	  margin-left: -3.73rem;
	  left: 50%;
	}
	.loading-icon {
	  width: 4rem;
	  height: 4rem;
	  animation: rotatingright 1s linear infinite;
    }
	/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/
	@keyframes rotatingright {
	  transform-origin: 50% 50%;
	  0% {
	    transform: rotate(0deg);
	  }
	  50% {
	    transform: rotate(180deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
 
	/*自定义动画类----逆时针旋转（使用这个动画的时候才设置动画执行时间）*/
	@-webkit-keyframes rotatingleft {
	  0% {
	    -webkit-transform: rotate(0deg);
	  }
	  50% {
	    -webkit-transform: rotate(-180deg);
	  }
 
	  100% {
	    -webkit-transform: rotate(-360deg);
	  }
	}

// 将组件库中定义的所有组件引进来，然后再导出
import Demo from './demo';
import Card from './card';
import Loading from './Loading';
 
const components = {
  Demo,
  Card,
  Loading
}
const install = function (Vue) { 
  // 判断是否安装，安装过就不继续往下执行
  if (install.installed) return
  Object.keys(components).forEach(component => { 
    Vue.component(components[component].name, components[component])
  })
}
export default {
  install
}

const { VueLoaderPlugin } = require('vue-loader');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const glob = require('glob')
const path = require('path')
const list = {}// 动态导入多个组件的入口文件
// 封装组件的一些配置，因为组件打包是单独打包的，所以需要单独配置
async function makeList (dirPath, list) {
  // 拿到所有的入口文件的路径
  const files = await glob.sync(`${dirPath}/**/index.js`)//[ 'components/lib/button/index.js', 'components/lib/icon/index.js']
  // 取出上一级目录的文件名
  files.forEach(file => {
    let name = file.split('/')[2]
    // 判断name是否有后缀名，有的话去除
    if (name.includes('.')) {
      name = name.split('.')[0]
    }
    list[name] = `./${file}`
  })
  // console.log(list)
}
makeList('components/lib', list)
module.exports = {
  entry: list,
  mode:'development',
  output: {
    filename: '[name].umd.js',// webpack打包的时候会将name替换成入口的name名字，例如card.umd.js
    path: path.resolve(__dirname, 'dist'),
    library:'mui',
    libraryTarget: 'umd',// 指定输出格式，umd是一种模块，兼容了CommonJS、AMD、CMD
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin()
  ],
  module: {
    // 配置rules，即什么样的文件，使用什么样的loader
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },// 这里只处理了css，而项目中组件中使用了scss文件，对于scss文件的处理这里使用的是gulp，下面会提到
      {
        test: /\.(png|jpg|gif|svg)$/i, // 匹配图片文件格式
        type: 'asset/resource', // 使用内置的asset模块处理资源文件
        generator: {
          filename: 'images/[name][ext]', // 输出的文件名格式
        },
      },
    ],
  },
}
  

const gulp = require('gulp');
// 需要把样式代码导入
const sass = require('gulp-sass')(require('sass'));
// 对css代码进行压缩
const minifyCSS = require('gulp-minify-css');
gulp.task('sass', async function () {
  return gulp.src('components/css/**/*.scss')
    .pipe(sass())// 将scss代码转换成css代码
    .pipe(minifyCSS())// 压缩css代码
    .pipe(gulp.dest('dist/css'))// 输出到打包目录
})