文章目录
前言
最近做项目时需要用到 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
是否继续?,输入 y
,并点击回车
输入项目名,这里我们输入 p5_test
, 并点击回车
1.2 选择框架
这里选择 vailla
框架(即不使用任何框架),点击回车
是否使用 ts
语言, 我们选择 vailla
(即使用原生 javaScript),点击回车
1.3 初始化项目
根据提示,在终端中依次输入:
# 使用npm
cd p5_test
npm install
# 或者使用yarn
cd p5_test
yarn
二、安装依赖
在终端中输入:
# 使用npm
npm install --save p5js
# 或者使用yarn
yarn add p5js
三、开始编程
3.1 添加容器
在 index.html
中为 p5.js
添加一个 div
容器
- 注意:容器必须是
div
, 不能错写为canvas
<div id="canvas"></div>
此时 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 App</title>
</head>
<body>
<div id="canvas"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
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);
};
3.3 运行项目
在终端中输入:
# 使用npm
npm run dev
# 或者使用yarn
yarn run dev
使用浏览器访问下面的网址:
此时,项目已成功运行起来:
四、打包并发布项目
4.1 打包项目
在终端中输入:
# 使用npm
npm run build
# 或者使用yarn
yarn run build
出现下列信息表示打包完成:
4.2 发布项目
将 dist
文件夹中的所有文件上传到服务器即可。
参考资料
- Vite官方文档:https://cn.vitejs.dev/
- p5.js官方文档:https://p5js.org/reference/
- p5.js - npm: https://www.npmjs.com/package/p5