简单Web Demo项目搭建

2023-04-11 15:17:39 浏览数 (2)

背景

最近用svg.js 做一些图形展示的demo， 在vscode下搭个web的编码环境，支持语法补全和实时预览。

实践

  1. 安装npm
  2. 新建demo目录
  3. 初始化环境 npm init -y
  4. 安装代码提示 npm install -D eslint （devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖使用 -D参数将依赖添加到devDependencies节点）
  5. 安装svg.js npm install @svgdotjs/svg.js
  6. 安装 parcel npm install -g parcel-bundler (打包工具，自动打包依赖同webpack)
  7. 添加 index.html
代码语言：html复制
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<script src="index.js" type=""></script>

</html>

7.添加 index.js

代码语言：txt复制
import { SVG } from "@svgdotjs/svg.js";
var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

8.运行 parcel index.html

前端工程化

0 人点赞