vue3-starry-sky

组件下载

npm i vue3-starry-sky

组件效果预览

• gitee pages
• github pages

全局使用方法

在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 |

源码地址

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

相关（vue-starry-sky）

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

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