前言

自从使用上vite和vue3后就爱不释手了，vite的秒级启动速度属实香，再加上vue3的CompositionAPI和setup语法糖的使用简便性，工作中新项目已经开始用这一套了。而且现在vite和vue3的第三方生态支持已经很好了（ps：可能还有些库不太兼容），所以打算借着这个机会再熟悉一下搭建与发布npm库的流程，之前基于vue-cli搭建过基于vue2的组件库vue-starry-sky，顺便也记录了一下搭建流程。所以打算升级一下这个库，使用vite和vue3来构建新的vue3-starry-sky背景特效组件库，下面是gif效果展示，废话不多说下面就详细介绍如何构建这个项目库吧！

访问gitee pages查看效果
访问github pages查看效果

vite、vue3库模式的脚手架搭建

1.创建基础的vite脚手架

按照vite官网的流程来搭建基本的脚手架

npm create vite@latest # 使用npm安装vite脚手架

然后如下图所示，项目命名为vue3-starry-sky，然后选择vue框架，选择vue（js版本不选vue-ts版本）。

2.改造vue3-starrry-sky项目

基本项目创建完成后，用VsCode（IDE）打开项目，在控制台输入npm i安装相关的包，安装完成后需要对现有文件进行改造，将文名字做如下修改：

修改：./src -> ./examples

新增：./packages（该文件夹用于存放开发的组件）

完成上述目录基础结构改造后，如果直接运行npm run dev会发现页面是空白的，这是因为修改了src文件夹名字，这里找到项目根目录下的index.html文件，修改文件内容，将里面的script标签的src属性内容由/src/main.js替换为/examples/main.js，修改完成后重新执行即可正常访问了，这里主要是用于项目内测试组件。

3.编写组件

这里使用之前的vue-starry-sky项目代码，根据之前编写的组件修改为vite+vue3的模式来开发；

然后添加几个文件，首先添加packages\StarrySky\src\starry-sky.vue文件用于编写组件，内容如下：

<script setup name="StarrySky">
import { ref, onMounted } from 'vue';const props = defineProps({starsCount: {type: [Number, String],default: () => 800,},distance: {type: [Number, String],default: () => 800,},
});//星星实体
const star = ref();onMounted(() => {let starArr = star.value;starArr.forEach((item) => {let speed = 0.1 + Math.random() * 1;let thisDistance = props.distance + Math.random() * 300;item.style.transformOrigin = `0 0 ${thisDistance}px`;item.style.transform = `translate3d(0,0,-${thisDistance}px) rotateY(${Math.random() * 360}deg) rotateX(${Math.random() * -50}deg) scale(${speed},${speed})`;});
});
</script><template><div class="starry-sky-bg"><div class="stars"><div v-for="item in starsCount" :key="item" class="star" ref="star"></div></div></div>
</template><style scoped>
.starry-sky-bg {width: 100%;height: 100vh;position: fixed;top: 0;left: 0;z-index: -100;background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);background-attachment: fixed;
}@keyframes rotate {0% {transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);}100% {transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);}
}.stars {transform: perspective(500px);transform-style: preserve-3d;position: fixed;perspective-origin: 50% 100%;left: 50%;animation: rotate 66s infinite linear;bottom: 0;z-index: -99;
}.star {width: 2px;height: 2px;background: #f7f7b8;position: fixed;top: 0px;left: 0;backface-visibility: hidden;
}
</style>

再添加packages\StarrySky\index.js文件用于导出该组件，内容如下：

import StarrySky from './src/starry-sky.vue';StarrySky.install = (App) => {App.component(StarrySky.__name, StarrySky);
};export default StarrySky;

导出组件这里，因为name在script标签上，所以获取名字的形参是__name，也可以直接用vue2的写法抛出名字，然后直接.name获取组件名。

再添加packages\index.js文件，用于导出所有的组件（这里其实只有一个组件，多组件只要在此基础上扩展即可），内容如下：

import StarrySky from './StarrySky';//按需引入
export { StarrySky };const components = [StarrySky];const install = (App) => {components.forEach((item) => {App.component(item.__name, item);});
};export default {install,
};

4.配置vite.config.js文件

首先需要修改vite.config.js文件，对其进行配置修改成库打包的模式，这里输出内容到lib文件夹中，打包入口文件设置为./packages/index.js文件，最终配置如下所示：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const { resolve } = require('path');export default defineConfig({plugins: [vue()],build: {outDir: 'lib',lib: {entry: resolve(__dirname, 'packages/index.js'), //指定组件编译入口文件name: 'Vue3StarrySky',fileName: 'vue3-starry-sky',},//库编译模式配置rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ['vue'],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: 'Vue',},},},// rollup打包配置},
});

5. 打包输出lib库

执行npm run build，根据上面的配置文件会在根目录生成一个lib文件夹，里面包含了UMD、ESM规范打包的几个js库文件，还有css样式文件，整个组件库文件最终都会输出在lib文件夹下。

上传到NPM官网

上传之前还需要做一些配置准备工作，首先配置一下package.json文件，如下所示：

{"name": "vue3-starry-sky", //包的名字"private": false, //不设置为私有，要公开可下载"version": "0.0.6", //版本号 每次发布都不能与历史版本号相同"keywords": ["starry","sky","starry-sky","vue3-starry-sky","vue-starry-sky"], //在npm上可被搜索的关键字"scripts": {"dev": "vite --force --host","build": "vite build","preview": "vite preview"},"files": ["lib"],"main": "lib/vue3-starry-sky.umd.js", //包函数入口文件"module": "lib/vue3-starry-sky.es.js", //ESM标准入口"exports": {"./lib/style.css":"./lib/style.css", //css文件需要暴露否则样式引入会报错".":{"import" : "./lib/vue3-starry-sky.es.js","require": "./lib/vue3-starry-sky.umd.js"}}, //向外暴露的文件 node规范"dependencies": {"vue": "^3.2.25"},"devDependencies": {"@vitejs/plugin-vue": "^2.3.3","vite": "^2.9.9"}
}

当然上传库到npm官网不能把所有文件都上传，所以还需要在根目录添加一个.npmignore文件，其作用是忽略不需要上传的文件内容，内容如下：

.DS_Store
node_modules
/dist# local env files
.env.local
.env.*.local# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*# 以下是新增的
# 要忽略目录和指定文件
.vscode
examples/
packages/
public/
vite.config.js
*.map
*.html

这样就只会上传npm所需的库文件，不会导致包文件过大。配置完成后就是如何上传到npm了。

首先需要注册一个npm官网账号，注意邮箱验证。
如果配置了淘宝源，先设置回npm源。
- 在控制台输入npm config set registry http://registry.npmjs.org 切换源
- 或者使用nrm use npm，需要安装nrm，然后换源。
然后使用npm login登录到npm官网。
登录上以后，输入npm publish就可以正式发布一个npm包了，然后之前注册的邮箱会收到发布成功的邮件。

注意：

发布前查看npm官网有没有同名的包，最好使用没有用过的名字，否则无法发布。
每次发布的版本号都必须不同，不然也会发布失败。

在库项目内查看效果（发布前查看）

之前修改src文件夹名为examples，然后又修改了index.html文件中的脚本路径（script的src属性值），npm run dev就可以启动一个vue3的项目了，这里我们可以在examples文件夹中编写使用组件的例子来查看编写的组件有没有问题，下面我们编写一个使用示例查看。

将App.vue直接替换为如下内容：

<script setup>
import { StarrySky } from '../packages';
</script><template><starry-sky :stars-count="1000" :distance="1000" />
</template><style></style>

.\examples\components文件夹下的文件不会使用到，所以可以删除。
上述代码按需引用了之前编写好的组件，随后启动脚本npm run dev就可以访问示例项目内容，查看组件效果了。

使用组件

1.安装组件

npm i vue3-starry-sky

2.全局使用方法

在vue3项目中全局引用的方式

//main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
import Vue3StarrySky from 'vue3-starry-sky';
import 'vue3-starry-sky/lib/style.css';const app = createApp(App);app.use(Vue3StarrySky);
app.mount('#app');

如果使用ts+vite的方式，需要在env.d.ts中加入最后一句声明，否则ts会检测报错。

/// <reference types="vite/client" />
declare module '*.vue' {import type { DefineComponent } from 'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>export default component
}declare module 'vue3-starry-sky';

组件内使用

<script setup></script><template><starry-sky :stars-count="1000" :distance="1000" />
</template><style></style>

3.局部引用方法

示例：

<script setup>
import { StarrySky } from '../packages/index';
</script><template><starry-sky :stars-count="1000" :distance="1000" />
</template><style></style>

4.参数说明

属性	类型	默认值	说明
stars-count	Number	800	星星的数量
distance	Number	800	范围调整

项目源码

如果觉得本文对您有帮助烦请点一个小小的赞(～￣▽￣)～；欢迎大家下载修改使用源代码，如果觉得本项目对您有帮助，可以star一下，非常感激大家的关注和使用。(〃‘▽’〃) 如果本文或者代码中有错误还望指正，谢谢！_(:3」∠❀)_

gitee地址：vue3-starry-sky
github地址：vue3-starry-sky

本项目基于vite+vue3基于之前的cli+vue2升级改造而来，想访问vue2库组件请点击下面链接地址：

gitee地址：vue-starry-sky
github地址：vue-starry-sky

亿些参考

bilibili up：// vue特效70行代码，一片动态星空

vue3+vite 自定义封装vue组件发布到npm包

2022-05-24 随笔使用vite构建一个npm包

基于vue2+cli搭建方式，更加细致

控制台错误解决方案

使用Vite构建Vue3组件库相关推荐

猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
使用 Vite 和 TypeScript 从零打造一个属于自己的 Vue3 组件库
前言随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被打造出来的吗? 读完这篇 ...
分享一个基于Vue3+TS构建Cesium组件库
分享一个基于Vue3+TS构建Cesium组件库点击进入 Vue Cesium官网 //vc-navigation <template><el-row ref="view ...
看了它--你也能轻松部署vue3组件库
开发组件库场景作为前端开发人员,当你运行一个 npm install element-plus -S,会安装 element-plus,打开 node_modules 能看到它对应很多相关联的依赖包 ...
手把手教你写一个Vue3组件库但是乞丐版
好久没写文章了,最近在研究一些组件库的实现方法,分享一下.在这我这篇文章之前其实已经有一篇文章讲了Vue如何打包组件库了(最底部),但是这篇文章一是没有源码二是Vue3和Vue2的组件库写法有点不一样 ...
【超硬核】从0-1构建UI组件库
文章目录 1.使用 2.keywords: 3.环境: 4.CRA初始化项目 5.安装typescript 6.编写组件(全局样式,组件) 7.安装storybook 8.配置tsconfig.bui ...
VUE3组件库-input组件
theme: mk-cute 这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战 VUE3组件库-input组件大家好,今天一起来学习vue3实现input组件,希望对你有帮助目录预览基 ...
从0搭建Vue3组件库(五): 如何使用Vite打包组件库
本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) 打包配置 vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安 ...
9个开源的 Vue3 组件库
作者:ARRON https://juejin.cn/post/7092766235380678687 参考了如下组件库,因为有些设计是多个版本和框架的,这里只讨论 Vue3 版本. element- ...

使用Vite构建Vue3组件库

前言