vue3+vite从零架构：写组件、构建、打包并上传个人前端组件库至私有npm仓库最终在自己项目中下载并使用（超详细的流程，小编已实现）

❆VE❆ 2024-07-28 14:33:01 阅读 71

第一章前言

第二章准备工作

第三章封装组件

3.1 文件结构

3.2 编写组件代码

第四章项目打包

第五章发布到npm

5.1 npm准备工作

5.2 发布npm包

编辑

第六章从npm安装使用

第一章前言

在我们很多开发过程中，不管是使用vue还是react，我都会导入第三方组件，比如我们最常用的element-ui/plus、antd、echarts…像这些已经封装好的组件可以在项目的任意地方使用，我们也会从npm仓库下载下来。但是由于一些公司/项目又有这些组件不适应的功能，从而我们又会自定义组件，在一些别的项目中遇到类似的功能，我们又会把封装好的组件复制到新的项目里，其实在这个过程中我们已经开始慢慢有构架的思想了，其实，我们可以将这些组件上传到npm仓库，要是在别的项目中有用到，直接再从npm安装使用即可。接下来小编就给大家详细说一下流程，跟着做即可(不管使用的是js还是ts，原理是类似的)。

第二章准备工作

创建vue3项目（前提条件：node版本18+）

<code>npm init vue@latest

(vue3项目创建，详细看小编下的该文章：)

vue3基础+进阶（一、Vue3项目创建并相比vue2熟悉项目结构）_vue create与vue3-CSDN博客

( node管理看小编下的该文章：)

nvm安装并配置环境变量使用nvm安装、切换nodejs-CSDN博客

初始化并运行项目

<code>npm install // 初始化项目

yarn run dev // 运行项目

第三章封装组件

3.1 文件结构

在根目录下新建一个packages文件夹，文件夹下的分别是components和index.js。packages的主要作用就是放我们的公共组件，后续导出的，index.js是批量导出组件的。

注意1：或许网上会有多种不同的方法创建这个文件夹并放置不同的位置，但是小编要说的是是：原理其实是和我们正常写项目时，创建公共组件的思路是一样的，大家一定不要被误解成一定需要这么创建！！这么做的原因：只是单纯的为了区分一下，后续上传npm上也是只需要打包这部分组件，其他部分都不是特别影响。注意2：packages下的文件结构最好是小编给的，components下放公共组件，index.js批量注册公共组件注意3：小编框的文件特别需要注意，后续需要使用的

3.2 编写组件代码

小编这里用了一个小图标为例子——wIcon.vue文件中的代码：

defineOptions({ // vue3定义的一些配置项(vue3项目的组件名一般是根据文件名走的)

name: 'w-icon'

})

const props = defineProps({ // 接受传参

className: { // 传参的类名

type: String

}

})

</script>

<template>

<i class="icon iconfont" :class="`icon-a-${props.className}`"></i> // 封装的内容，将参数拼接code>

</template>

<style scoped> // 样式

i {

font-size: 100px;

}

</style>

注意：有不清楚的看vue3的官方文档

https://cn.vuejs.org/

 由于我们这里封装的是图标，所以如果直接用上面的代码是没有内容的。这里需要使用到iconfont，网址如下： 
  
  
 iconfont-阿里巴巴矢量图标库
  
 这种用法小编就不详细说了：找图标放到自己创建的项目中，然后在自己的项目中导入
 
 
index.html文件下：
 
<code><link rel="stylesheet" href="//at.alicdn.com/t/c/font_4613448_g8pczuzf37.css">code> 
批量导出：packages/index.js文件下 
import { defineAsyncComponent } from 'vue'
const components = import.meta.glob('./components/*.vue')
const registerGlobalComponent = (app) => {
 for (const [key, value] of Object.entries(components)) {
 const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
 app.component(name, defineAsyncComponent(value))
 }
}
export default registerGlobalComponent 
 -- 注意：这里一定要以export default registerGlobalComponent的形式暴露出函数，否则在后续打包上传到npm后，使用会报错
 
批量注册组件可以看小编下的该文章：
 
  
  
 vue：vue2与vue3如何全局注册公共组件（包括涉及到的相关方法函数的讲解）_vue2 vue3全局组件的使用-CSDN博客
  
 (自此，我们的icon组件初步封装并注册成功)
 
写好的组件我们可以自测一下：(这里引用与正常写项目使用公共组件是一样的，在main.js文件下引入组件) 
import registerGlobalComponent from '../packages/index'
registerGlobalComponent(app) 
 
然后在页面上使用一下(小编这里偷懒了，直接在初始文件自带的组件下使用了，如下：)  
<code><w-icon className="070_bangong" /> // 公共组件，直接使用即可，根据自己封装的内容传参数code> 
 
注意用法：
 
 
查看效果 
 
说明封装没有问题！！
 
第四章  项目打包
 网上教程会跟你说打包要改什么什么，其实，什么都可以不用改，我们正常打包也是可以的但是我们区分不了哪些是我们自定义的公共组件；(而npm上传的主要是打包后的文件和package.json，其他都不要)，所以我们这里为了区分一下正常的打包，小编讲一下原理： 
        -- 在vite.config.js文件中添加改配置项：(该配置是yarn build时输出的信息)