项目搭建及初始化

前期准备

技术栈

• vue3(runtime-core)
• canvas 游戏引擎 pixi.js
• webpack

  开发工具

  vscode

搭建项目并完成初始化

使用npm初始化项目管理

# 初始化项目管理生成 package.json
npm -y
# 使用 git 管理项目
## 初始化 git, 生成 git 仓库
git init
## 添加远程仓库
git remote add <name> <address>
### 例如: git remote add origin git@github.com:xx/xx.git

安装架包

# 核心架包 @vue/runtime
yarn add @vue/runtime-core
# canvas 游戏引擎 pixi.js
yarn add pixi.js
# js 动画库 tween.js
yarn add @tweenjs/tween.js
# 打包工具 webpack
yarn add webpack webpack-cli -D
# webpack 热更新工具
yarn add webpack-dev-server -D
# 静态文件处理工具(图片资源)
yarn add file-loader -D

在 package.json 添加开发和打包命令

"scripts": {
    "serve": "webpack-dev-server --open",
    "build": "webpack"
 }

初始化目录结构

#整体结构
┌─public                                
│  └─index.html                    
│─src                              代码编辑区
│  └─****                            查看下方src文件夹下目录结构
├─.gitignore                        git 过滤文件
├─webpack.config.js            webpack 配置文件
└─package.json                     架包管理文件
#src文件夹下目录
┌─apis                    请求数据接口
├─config                                项目配置文件
│  └─index.js                        
│─components            组件目录
│  ├─Map.js                 可复用的组件(地图组件)
│  └─...                                更多组件
├─pages                 业务页面文件存放的目录
│  ├─GamePage.js                 游戏界面
│  └─...                                更多页面
├─assets                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│  └─images                            图片资源
├─runtime-canvas          
│  └─index.js                        vue3 自定义渲染器实现
├─utils                                 工具文件存在在该目录下
├─main.js                  Vue初始化入口文件
├─App.js                   应用配置，用来配置App全局样式以及监听 应用生命周期
└─Game.js                                游戏配置, 将 canvas 元素添加到Dom中

可以自定义目录，根据项目需求。

附录:

package.json 配置

{
  "name": "game-aircraft-battle",
  "version": "1.0.0",
  "description": "基于vue3 的 canvas 游戏",
  "main": "main.js",
  "scripts": {
    "serve": "webpack-dev-server --open",
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Fuarmy/game-aircraft-battle.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Fuarmy/game-aircraft-battle/issues"
  },
  "homepage": "https://github.com/Fuarmy/game-aircraft-battle#readme",
  "dependencies": {
    "@tweenjs/tween.js": "^18.6.4",
    "@vue/runtime-core": "3.0.0-rc.5",
    "pixi.js": "^5.3.5"
  },
  "devDependencies": {
    "file-loader": "^6.2.0",
    "webpack": "4.44.1",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js 配置

const path = require("path");
const { webpack } = require("webpack");
module.exports = {
    entry: path.resolve(__dirname, "src/main.js"),
    output: {
        filename: "main.bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    devtool: "source-map",
    devServer: {
        contentBase: path.resolve(__dirname, "public")
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "assets/images/",
                            publicPath: ""
                        }
                    }
                ]
            }
        ]
    }
}

文件来源于 @开课吧

参考资料：

Vue3 官方文档
Vue3 中文文档