• 【前端】搭建 Vite + P5.js 项目

    文章目录

    前言

    最近做项目时需要用到 vite + p5.js 的组合，但并没有在网络上找到相关的博文，因此在实践过程中遇到了很多问题。所以用本篇博客记录一下相关流程，方便大家、也方便自己在做项目时进行参考。

    框架介绍

    P5.js

    p5.js 是一个 JavaScript 函数库，它的目的就是让艺术家、设计师、教育工作者和编程初学者能够很容易，更加轻松地变成和进行数字艺术设计。本质上就是对 canvas 等代码的封装，简化了在 Web 中绘图的代码。

    Vite

    Vite 是一种新型的 Web 前端构建工具，最初是配合 Vue3.0 一起使用的，后来适配了各种前端项目，目前提供了 Vue、React、Preact 等框架模板。相比于老牌的 Webpack ，它最大的优点就是 「快」 。

    一、初始化项目

    1.1 创建一个新项目

    在终端中输入：

    # 使用npm
npm create vite

# 或使用yarn
yarn create vite

    • 1
    • 2
    • 3
    • 4
    • 5

    是否继续？，输入 y，并点击回车

    请添加图片描述

    输入项目名，这里我们输入 p5_test, 并点击回车

    请添加图片描述

    1.2 选择框架

    这里选择 vailla 框架（即不使用任何框架）,点击回车

    请添加图片描述

    是否使用 ts 语言, 我们选择 vailla （即使用原生 javaScript），点击回车

    请添加图片描述

    1.3 初始化项目

    根据提示，在终端中依次输入：

    # 使用npm
cd p5_test
npm install

# 或者使用yarn
cd p5_test
yarn

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    二、安装依赖

    在终端中输入：

    # 使用npm
npm install --save p5js

# 或者使用yarn
yarn add p5js

    • 1
    • 2
    • 3
    • 4
    • 5

    三、开始编程

    3.1 添加容器

    在 index.html 中为 p5.js 添加一个 div 容器

    • 注意：容器必须是 div, 不能错写为 canvas
    <div id="canvas">div>

    • 1

    此时 index.html 的完整代码为：

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite Apptitle>
  head>
  <body>
    <div id="canvas">div>
    <script type="module" src="/main.js">script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3.2 编写绘图代码

    在 main.js 中输入下列代码：

    import './style.css';

// 引入 p5.js 依赖
// 一定要注意库的路径，p5.j包的路径比较特殊，不要弄错
import p5 from 'p5js/p5.js/p5.js';

let canvas = document.querySelector('canvas')

// 绘图回调函数
const s = sketch => {
  
  // 调用 p5.js 内置的方法或函数必须在前面加上 'sketch.'
  // 例如：background(0) 需要变成 sketch.background(0)
  sketch.setup = function () {
      sketch.createCanvas(500, 500);
  };

  sketch.draw = function () {
      sketch.stroke(255, 0, 0);
      sketch.line(sketch.mouseX, sketch.mouseY, 250, 250);
  };
};


window.onload = ()=>{
  // 创建并绑定 p5 实例（必须在网页加载完成后）
  new p5(s, canvas);
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    3.3 运行项目

    在终端中输入：

    # 使用npm
npm run dev

# 或者使用yarn
yarn run dev

    • 1
    • 2
    • 3
    • 4
    • 5

    使用浏览器访问下面的网址：

    请添加图片描述

    此时，项目已成功运行起来：

    请添加图片描述

    四、打包并发布项目

    4.1 打包项目

    在终端中输入：

    # 使用npm
npm run build

# 或者使用yarn
yarn run build

    • 1
    • 2
    • 3
    • 4
    • 5

    出现下列信息表示打包完成：

    请添加图片描述

    4.2 发布项目

    将 dist 文件夹中的所有文件上传到服务器即可。

    请添加图片描述

    参考资料

  • 相关阅读:
    Python+AI给老照片上色
    C#提取硬件信息HardwareHelper
    华为ac+fit漫游配置案例
    GPT-SoVITS开源音色克隆框架的训练与调试
    JS操作字符串面试题系列（2）-每天做5题
    程序员的中秋
    ROS+Pytorch的联合使用示例（语义分割）
    git和github的入门操作
    github常用搜索指令
    《文献阅读》- 遗传算法作为量子近似优化算法的经典优化器（未完成）
  • 原文地址：https://blog.csdn.net/qq_34802028/article/details/126806359