使用vue-cli初始化一个vue项目我就不多说了，在我的这边文章里已经写过：
从零开始vue项目使用cesium开发三维地图（一）_yinzisang的博客-CSDN博客
创建完成后我们安装pixi插件：
npm install --save vue-pixi@5.1.2
安装成功后page.json里面查看：
新建一个PixiDemo.vue文件，后续我们都是通过这个Demo来操作pixi
PixiDemo初始化：
<template> <div id="pixi"></div> </template> <script> import * as PIXI from 'pixi.js' export default{ name：ddd data(){ return{ } } } </script>
第一步是使用Pixi上的Application对象创建一个矩形显示区域。 它会自动生成一个HTML <canvas>元素，然后在canvas画布上显示图像。 之后，您需要创建一个称为stage（舞台）的特殊Pixi容器对象。
注意:这里踩坑了一开始我我引用vue项目中src目录下的logo.png,却怎么都不显示，后来发现引入方式不对，这里看了两篇博客才解决
Vue 中加载图片 public 和 src/assets 文件夹下的区别（采坑）_前端技术-CSDN博客
上代码:
methods:{ init(){ let app = new PIXI.Application({ width: 500, height: 500, antialias: true, transparent: true, resolution: 1, }); app.stage.alpha=0.5 let url = require('../../assets/cat.png') document.getElementById("pixi").appendChild(app.view); app.loader .add(url) .load(setup) function setup(){ let cat=new PIXI.Sprite(app.loader.resources[url].texture) cat.x=10 cat.y=10 cat.width=80 cat.height=80 app.stage.addChild(cat) } } }, mounted(){ this.init() }
效果图：
transparent: false可以改变画布是否透明
下一章我们将实现如何实现闪烁点功能
