基于第0讲和第1讲,我们增添了vite.config.ts文件。并配置了其他的http端口。
此时,我们删除掉没用的东西。
删除 conter.ts、typescript.svg
在main.ts中改成如下内容:
import {Application, Text} from 'pixi.js'
import './style.css'
// 指明Application的类型是一个HTML的Canvas, 也就是HTMLCanvasElement
let app = new Application<HTMLCanvasElement>();
document.body.appendChild(app.view)
let text = new Text('Hello World', {
fill: 0x00FF00
});
app.stage.addChild(text);
在style.css中,删除所有代码,并且添加如下代码:
body{
margin: 0
}
然后在package.json中点击Debug,启动了localhost:7777
这是我的vite.config.ts配置:
import { defineConfig } from 'vite';
export default defineConfig({
server: {
port: 7777,
host: '0.0.0.0'
},
});
最后在浏览器中查看: