前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简单Web Demo项目搭建

简单Web Demo项目搭建

原创
作者头像
8菠萝
发布2023-04-11 15:17:39
9890
发布2023-04-11 15:17:39
举报
文章被收录于专栏:菠萝上市没有

背景

最近用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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 实践
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档