[NodeJS实战][Vue实战]Vue-PixiJS [开箱可用][新手极简]

Vue-PixiJS

官网:
背景:
- Vue.js 是什么
- Pixi JS 是什么
- 核心代码
1.配置步骤
- 1.1 安装nodejs
- 1.2 确认npm cnpm
- 1.3 安装vue脚手架:
- 1.4 安装pixijs:
2.运行本项目
3.github地址:
4.演示:

官网:

https://cn.vuejs.org/
https://www.pixijs.com/

背景:

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库
结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带你了解其核心概念和一个示例工程。

Pixi JS 是什么

Pixi.js 提供一个快速轻量级的2D库，它可以跨所有设备工作。
渲染器让每个人都可以享受硬件加速的强大功能，而无需事先了解WebGL。而且，速度很快。真的很快。

核心代码

// var pixi = require('pixi');
import * as PIXI from "pixi.js";export default {name: "pixi2",props: {},data() {return {};},mounted() {this.initState();},methods: {initState() {let app = new PIXI.Application({width: 800, // default: 800 宽度height: 600, // default: 600 高度antialias: true, // default: false 反锯齿transparent: false, // default: false 透明度resolution: 1, // default: 1 分辨率backgroundAlpha: 0, // 设置背景颜色透明度   0是透明});app.renderer.backgroundColor = 0x262626; // 设置canvas背景颜色console.log(app);// 将创建好的canvas添加到元素当中去document.getElementById("pixi2").appendChild(app.view);// TODO 路径暂时写死let bear = new PIXI.Sprite.from("http://localhost:8080/images/bunny.png");bear.x = 400;bear.y = 300;app.stage.addChild(bear);app.stage.interactive = true;// 小熊点击事件app.stage.on("pointerdown", () => {bear.scale.x *= 1.25;bear.scale.y *= 1.25;});},},
};

1.配置步骤

1.1 安装nodejs

1.2 确认npm cnpm

npm install -g cnpm -registry=https://registry.npm.taobao.org

1.3 安装vue脚手架:

npm install vue-cli -g

1.4 安装pixijs:

npm install pixi.js

2.运行本项目

命令行执行:npm run serve

3.github地址:

https://github.com/zld126126/vue-pixijs

4.演示:

[NodeJS实战][Vue实战]Vue-PixiJS [开箱可用][新手极简]相关推荐

vue实战之在线翻译项目
vue实战之在线翻译项目今天,博主带来的分享是vue实战之在线翻译项目,一个小小的vue项目,用到了vue的很多基础语法,传组件等等!我们先来看下效果把! 左侧输入一种语言,右侧选择要转换的语言,点 ...
Vue实战电商系统-五商品管理
Vue实战电商系统-五商品管理商品管理 1.新建goods_cate子分支并上传码云 2.商品管理-商品分类 1.新建文件并配置路由 2.页面布局 3.获取分类列表数据 4.将数据渲染在树形表格控件 ...
Vue实战狗尾草博客后台管理系统第三章
Vue实战狗尾草博客后台管理系统第三章 Vue实现狗尾草博客后台管理系统第三章本章节,咱们开发管理系统侧边栏及面包屑功能. 先上一张效果图样式呢,作者前端初审,关于设计上毫无美感可言,大家可根据自 ...
Vue实战快速上手-vue+ElementUI
Vue实战快速上手-vue+ElementUI 前言创建工程安装依赖使用创建组件配置路由导入路由展示运行问题前言 ElementUI是饿了么的官方组件库,可以将vue和Elemen ...
Vue实战-实现登陆页面
Vue实战-实现登陆页面文章目录 Vue实战-实现登陆页面 1 前期准备 1.1 安装Node.js 1.2 安装webpack 1.3 安装vue-cli 2 搭建Vue项目 2.1 创建项目 2 ...
Go实战Gin+Vue+微服务打造秒杀商城第五课 gin+vue实战
gin+vue实战后端: 用户管理用户列表登录/登出商品管理商品的增上改查活动管理商品关联成功率 redis队列,不成功的回到队列继续,成功的从队列删除结束难点: 代码和部署完全隔离 ...
Vue实战狗尾草博客后台管理系统
Vue实战狗尾草博客后台管理系统第一章这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
js文件里获取路由 vue_「如何优雅的使用Vue?」不可不知的Vue实战技巧
作者: CHICAGO 转发连接:https://juejin.im/post/5e475829f265da57444ab10f 前言在大家都会用vue的时代,我们又如何去区别是新手小白还是资深vu ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...

[NodeJS实战][Vue实战]Vue-PixiJS [开箱可用][新手极简]

Vue-PixiJS

官网:

背景:

Vue.js 是什么

Pixi JS 是什么

核心代码

1.配置步骤

1.1 安装nodejs

1.2 确认npm cnpm

1.3 安装vue脚手架:

1.4 安装pixijs:

2.运行本项目

3.github地址:

4.演示:

[NodeJS实战][Vue实战]Vue-PixiJS [开箱可用][新手极简]相关推荐

最新文章

热门文章