Vue学习笔记

canvas绘制与Vue的双向绑定 

在图像绘制相关的模块，开发最容易犯的问题是在vue的监听数据中绑定了canvas绘制实例或者上级，导致渲染出现问题. 

vue2.0封装自定义组件库，发布到NPM

参考Vue-Cli官网，使用Verdaccio搭建私服

// 在package.json中配置
"name": "spacetime-mapservice",
"version": "0.0.6",
"description": "时空大数据平台地图服务客户端",
"main": "dist/spacetime-mapservice.umd.js",
"scripts": {
    "package": "vue-cli-service build --target lib --name spacetime-mapservice ./src/components/index.js",
    "unpublish": "npm unpublish spacetime-mapservice@0.0.6  --registry http://10.0.0.60:4873/",
    "publish": "npm publish --registry http://10.0.0.60:4873/",
    ...
}

​​​​​​​​​​​​Vue3.0获取DOM元素 

<script setup lang="ts">
import { onMounted, ref } from 'vue';

// 绑定dom canvas对象
const gpucanvas = ref(null);

onMounted(()=>{
  const canvas = gpucanvas.value;
  if(!canvas){
    throw new Error("无法获取画布！");
  }
  WebGPUUtils.run(canvas);
})
</script>

<template>
  <canvas ref="gpucanvas"></canvas>
</template>