自从使用上vite和vue3后就爱不释手了,vite的秒级启动速度属实香,再加上vue3的CompositionAPI和setup语法糖的使用简便性,工作中新项目已经开始用这一套了。而且现在vite和vue3的第三方生态支持已经很好了(ps:可能还有些库不太兼容),所以打算借着这个机会再熟悉一下搭建与发布npm库的流程,之前基于vue-cli搭建过基于vue2的组件库vue-starry-sky,顺便也记录了一下搭建流程。所以打算升级一下这个库,使用vite和vue3来构建新的vue3-starry-sky背景特效组件库,下面是gif效果展示,废话不多说下面就详细介绍如何构建这个项目库吧!
按照vite官网的流程来搭建基本的脚手架
npm create vite@latest # 使用npm安装vite脚手架
然后如下图所示,项目命名为vue3-starry-sky,然后选择vue框架,选择vue(js版本不选vue-ts版本)。
基本项目创建完成后,用VsCode(IDE)打开项目,在控制台输入npm i
安装相关的包,安装完成后需要对现有文件进行改造,将文名字做如下修改:
修改:./src -> ./examples
新增:./packages(该文件夹用于存放开发的组件)
完成上述目录基础结构改造后,如果直接运行npm run dev
会发现页面是空白的,这是因为修改了src文件夹名字,这里找到项目根目录下的index.html文件,修改文件内容,将里面的script
标签的src
属性内容由/src/main.js
替换为/examples/main.js
,修改完成后重新执行即可正常访问了,这里主要是用于项目内测试组件。
这里使用之前的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,
};
首先需要修改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打包配置
},
});
执行npm run build
,根据上面的配置文件会在根目录生成一个lib文件夹,里面包含了UMD、ESM规范打包的几个js库文件,还有css样式文件,整个组件库文件最终都会输出在lib文件夹下。
上传之前还需要做一些配置准备工作,首先配置一下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包了,然后之前注册的邮箱会收到发布成功的邮件。
注意:
之前修改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
就可以访问示例项目内容,查看组件效果了。
npm i vue3-starry-sky
在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-types
const 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>
示例:
<script setup>
import {
StarrySky } from '../packages/index';
</script>
<template>
<starry-sky :stars-count="1000" :distance="1000" />
</template>
<style></style>
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
stars-count | Number | 800 | 星星的数量 |
distance | Number | 800 | 范围调整 |
如果觉得本文对您有帮助烦请点一个小小的赞(~ ̄▽ ̄)~ ;欢迎大家下载修改使用源代码,如果觉得本项目对您有帮助,可以star一下,非常感激大家的关注和使用。(〃‘▽’〃) 如果本文或者代码中有错误还望指正,谢谢!_(:3」∠❀)_
本项目基于vite+vue3基于之前的cli+vue2升级改造而来,想访问vue2库组件请点击下面链接地址:
文章浏览阅读233次。1.SQL 数据操作语言(Data Manipulation Language,DML)语句,比如 INSERT、UPDATE 或 DELETE 语句;2.DDL(Data Definition Language)数据定义语言(DDL)常见的DDL有:CREATE DATABASE,CREATE TABLE,ALTER TABLE,DROP TABLE,CREATE VIEW, DROP VIEWTRUNCATE TABLE 删除数据表内容3.数据控制_t-sql,ddl,dcl
文章浏览阅读829次。2019年在整体上,前端的主流框架没有太大的变化,业务代码仍由三大框架(React、Vue、Angular)所主宰着,打包工具一般仍使用webpack、Rollup.js,状态管理器还是Redux、MobX。但随着这两年崛起的新框架与类库,一些细微之处悄悄地起变化了,这些变量可能在未来推动着前端的发展。因此本文为大家介绍国产十大新兴前端框架,毕竟开发者对一项技术的关注,是技术发展的动力。拥有十年纯前端经验,学前端可+QQ裙564050054即可领取学习资料和源码哦~大家可以进裙互相交流学习!ramda_net 前端框架
文章浏览阅读1.6k次。地址:http://apache-flink.147419.n8.nabble.com/_flink中的 nabble: 提取网址
文章浏览阅读244次。 Cobbler自动化安装Linux系统 Cobbler介绍Cobbler称之为 网络安装服务器套件,可以通过网络启动(PXE)的方式来快速安装、重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等。管理方式:可以使用命令行方式管理,也可以基于Web的界面管理工具(cobbler-web)管理,还可以通过API接口二次开发。另外Cobbler是较早前的kickstart的升级版,优点..._cobbler安装linux没找到bootable
文章浏览阅读2.1k次,点赞2次,收藏16次。Invertible Image Rescalinghttps://arxiv.org/pdf/2005.05650.pdfAbstractHigh-resolution digital images are usually downscaled to fit various display screens or save the cost of storage and bandwidth, meanwhile the post-upscaling is adpoted ..._m. xiao et al., “invertible image rescaling,” in proc. eur. conf. comput.
文章浏览阅读663次。事实是,我们处在艰难时期。 我们花了将近三个月的时间将构建机制从Ant迁移到Maven 。 如果您打算在大型项目中做同样的事情,那就是您必须安排的最短时间。 我们仍在努力解决这种迁移带来的一些附带影响,但幸运的是,它们并不是那么关键。 上下文 仅需要一点上下文,我们就有一个完整的Java EE 6系统,该系统由25个集成应用程序组成,每个应用程序平均具有3个模块(EJB,WEB等),大约..._ant项目转换成maven
文章浏览阅读287次。环境CentOS7.2 (安装镜像CentOS-7-x86_64-DVD-1611)目标在CentOS7.2上安装jdk1.8(tar.gz安装包),并配置环境变量jdk安装在/home/soft/jdk1.8.0-111目录下执行步骤1、检查和删除系统预装jdk//如果操作系统不是最小安装,会默认安装openjdk#rpm -qa |..._export java_home=/home/你的 户名/software/jdk1.8.0_77用法
文章浏览阅读913次,点赞8次,收藏25次。你的支持,我的动力;祝各位前程似锦,offer不断,步步高升!!!你的支持,我的动力;祝各位前程似锦,offer不断,步步高升!!!更多资料点击此处获qu!!
文章浏览阅读1.2k次,点赞72次,收藏62次。使用这个主题注释的颜色会有点浅不好看清,可以再字体和颜色里修改一下注释的颜色,改成绿色挺好看清。更换完主题后就可以享受自己的全新vs了(外貌全新)。主题的名字叫NightOwl,和vscode的主题颜色挺像的。操作方法也十分简单,首先我们先在最上面哪一行找到扩展。安装完毕后在最上方那一栏找到工具选项(就在扩展左边),点击最下面的选项。最近发现了一个很好看的vs主题(个人认为挺好看的),想要分享给大家。然后点击管理扩展,再搜索栏上搜索NightOwl,下载这个插件。然后就可以更换主题了。_vscode插件nightowl
文章浏览阅读2.3k次。随着近年来金融业的高速发展,其对信息存储和处理能力的要求越来越高。金融业的各种服务都依赖于对信息的管理和分析。数据中心作为支持信息化应用的平台,将扮演越来越重要的角色。许..._数据中心机房布线安全管理数据库设置
文章浏览阅读2.9k次。1.NetworkManagementService继承了INetworkManagementService.Stub,因此提供对应的 AIDL 定义的服务:在 frameworks/base/core/java/android/os/INetworkManagementService.aidl 中定义interface INetworkManagementService{ /* Register and unregister an observer to receive ev..._android registerscanresultscallback
文章浏览阅读7.2k次,点赞6次,收藏9次。argparse库是用于接受从command-lines传来参数的库,即argparse库接受命令台终端出传入的参数,但在VScode中并不需要从command-lines来配置参数。VScode通过launch.json文件配置args参数,并通过在python文件中引入sys模块调用参数args1=sys.argv[3]launch.json文件:{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问:_launch.json args 参数