@khmer-chi/pixi-vue
v2.2.4
Published
npm i @khmer-chi/pixi-vue
Readme
my blog
how to install
npm i @khmer-chi/pixi-vue
base on
- pixi.js
- vue
- @pixi/layout
how to use
step1: vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { isPixiVueElement } from "@khmer-chi/pixi-vue";
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: isPixiVueElement,
},
},
}),
],
});step2: main.ts
import App from "./App.vue";
createPixiApp(App, document.getElementById("app")!);step3: App.vue
<template>
<PixiApplication
:width="500"
:height="500"
:layout="{
backgroundColor: '#1099bb',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}"
@resize="
(...args) => {
console.log(args);
}
"
>
<PixiLayoutText
text="12123243"
:layout="{ width: 200, height: 100, backgroundColor: '#000fff' }"
:style="{
fill: '#fff000',
}"
/>
</PixiApplication>
</template>step4: index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pixi-vue demo</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>to do list
- unit test