使用Visual Studio Code（VSC）进行Vue开发非常方便，下面是一些基本步骤：
-
安装Node.js：Vue.js是基于Node.js的，所以首先需要安装Node.js。你可以从Node.js官方网站（https://nodejs.org）下载适合你操作系统的安装程序，并按照说明进行安装。
-
安装Vue CLI：Vue CLI是一个用于快速搭建Vue项目的脚手架工具。在安装Node.js后，打开终端或命令提示符，运行以下命令来全局安装Vue CLI：
npm install -g @vue/cli
- 创建Vue项目：在VSC中打开一个新的终端窗口，运行以下命令来创建一个新的Vue项目：
vue create your-project-name
这将提示你选择一些配置选项，例如选择预设配置（默认或手动选择）、使用哪个包管理器（npm 或 Yarn）等。按照自己的需要进行选择。
-
打开Vue项目：在VSC的侧边栏中，点击"文件"（File）菜单，选择"打开文件夹"（Open Folder）并导航到你创建的Vue项目文件夹，然后点击"打开"（Open）。
-
安装项目依赖：在VSC的终端窗口中，确保路径位于你的Vue项目文件夹下，然后运行以下命令来安装项目所需的依赖：
npm install
-
开始开发：现在你可以在VSC中编辑和开发你的Vue项目了。你可以在src目录下找到主要的Vue组件文件，并在这里编写你的代码。在VSC中，你可以使用Vue相关的插件和扩展来提高开发效率，例如Vetur、Vue 3 Snippets等。你可以在VSC的扩展市场中搜索并安装这些插件。
-
运行项目：在VSC的终端窗口中，使用以下命令来运行你的Vue项目：
npm run serve
这将启动开发服务器并运行你的Vue应用。你可以在浏览器中访问提供的开发服务器地址（通常是http://localhost:8080）来查看你的应用程序。
- 如何查看自己的node.js版本
node --version
1. 如何使用nvm
nvm：Node版本管理器,如果你在同一台机器上同时进行多个项目的开发，并且这些项目对Node.js版本有不同的要求，你可以考虑使用Node版本管理器（如nvm）来方便地切换不同的Node.js版本。使用nvm，你可以在不同的项目中使用不同的Node.js版本，以满足项目的要求。你可以在nvm的官方文档（https://github.com/nvm-sh/nvm）中了解如何安装和使用它。
- 安装 NVM：首先，你需要从 NVM 的 GitHub 仓库（https://github.com/nvm-sh/nvm）获取安装脚本。打开终端或命令提示符，运行以下命令来下载并执行安装脚本：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
或者，如果你使用的是 Windows 操作系统，可以从 NVM 的 GitHub 仓库下载可执行安装程序并按照说明进行安装。
-
重启终端：安装完成后，关闭当前终端窗口，然后重新打开一个新的终端窗口。这样可以使 NVM 的设置生效。
-
安装 Node.js 版本：在新打开的终端中，运行以下命令来查看可以安装的 Node.js 版本列表：
nvm ls-remote
这将列出可用的 Node.js 版本。你可以选择一个你想要安装的特定版本，例如：
nvm install 14.17.0
这将安装 Node.js 的 14.17.0 版本。根据你的需求选择一个适当的版本进行安装。
- 使用特定版本的 Node.js：一旦你安装了多个 Node.js 版本，你可以在不同的项目中切换使用特定的版本。在终端中，你可以运行以下命令来选择一个已安装的 Node.js 版本：
nvm use 14.17.0
2. 使用Vue绘制几个椭圆形成工作流
- MySelfDAG.vue
<template>
<div class="parent-container">
<!-- 模板部分 -->
<div class="bordered-div top-section" >
<label for="inputText">事件信息：</label>
<input type="text" id="inputText" v-model="text" >
<button @click="submit">确定</button>
</div>
<div class="bordered-div bottom-section canvas-container">
<canvas ref="canvas" id="myCanvas" width="3500" height="600"></canvas>
</div>
</div>
</template>
<script>
import { postData } from '../PostApi.js';
//v-text="房屋沉降模块-沉降时点数据导入"
export default {
data() {
return {
text: '' // 绑定输入文本的数据
};
},
methods: {
submit() {
// 在点击确定按钮时执行的操作
console.log('输入的文本：', this.text);
this.getDataChangeEvents(this.text);
// 其他逻辑处理...
},async getDataChangeEvents(kindname){
const parsInfo={
"key": "通用查询-获取事件信息",
"mapParsInfo": {
"事件名称":kindname
}
}
const resultdata = await postData (parsInfo);
this.drawCollection(resultdata.data)
},drawCollection(eventItems) {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
// 获取设备的像素比例
const devicePixelRatio = window.devicePixelRatio || 1;
// 设置画布的宽度和高度
const width = canvas.offsetWidth;
const height = canvas.offsetHeight;
// 调整画布的像素比例
canvas.width = width * devicePixelRatio;
canvas.height = height * devicePixelRatio;
// 缩放绘图上下文，以适应高分辨率设备
ctx.scale(devicePixelRatio, devicePixelRatio);
// 清除画布
ctx.clearRect(0, 0, width, height);
const horizontalSpacing = 200; // 纵向间距
const centerY = canvas.height / 2; // 中心点的横坐标
const startX = (canvas.width / 2 - ( eventItems.length - 1) * horizontalSpacing / 2); // 计算起始点的纵坐标
this.drawGroup(ctx);
for (let i = 0; i < eventItems.length; i++) {
const x = startX + i * horizontalSpacing;
const radius = 40; // 椭圆的半径
ctx.strokeStyle = 'black';
// 清除填充色
ctx.fillStyle = 'gray';
// 绘制椭圆
ctx.beginPath();
ctx.ellipse(x+5, centerY+5, radius*1.5, radius, 0, 0, 2 * Math.PI);
ctx.closePath(); // 闭合路径
ctx.fill(); // 填充椭圆
ctx.strokeStyle = 'black';
// 清除填充色
ctx.fillStyle = 'blue';
// 绘制椭圆
ctx.beginPath();
ctx.ellipse(x, centerY, radius*1.5, radius, 0, 0, 2 * Math.PI);
ctx.closePath(); // 闭合路径
ctx.fill(); // 填充椭圆
// 设置文字样式
ctx.font = '12px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'center'; // 设置文字对齐方式为居中
ctx.textBaseline = 'middle'; // 设置文字基线为垂直居中
// 绘制文字
ctx.fillText(eventItems[i].name, x, centerY);
// 绘制箭头连接线
if (i > 0) {
ctx.beginPath();
ctx.moveTo((startX + (i-1) * horizontalSpacing)+(radius*1.5), centerY);
ctx.lineTo((startX + (i) * horizontalSpacing)-(radius*1.5), centerY);
ctx.stroke();
}
}
},drawGroup(ctx){
const startX = 100; // 起始点的 x 坐标
const startY = 100; // 起始点的 y 坐标
const width = 500; // 大括号的宽度
const height = 100; // 大括号的高度
const radius = 20; // 曲线的半径
// 绘制左侧曲线
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(startX, startY + height);
ctx.arc(startX + radius, startY + height, radius, Math.PI, Math.PI * 1.5, false);
// 绘制右侧曲线
ctx.arc(startX + width - radius, startY + height, radius, Math.PI * 1.5, Math.PI * 2, false);
ctx.lineTo(startX + width, startY);
ctx.stroke();
},
},
mounted() {
this.canvas = this.$refs.canvas;
this.context = this.canvas.getContext('2d');
this.isDrawing = false;
this.startX = 0;
this.startY = 0;
this.width = 0;
this.height = 0;
},
};
</script>
<style>
.bordered-div {
border: 1px solid black; /* 设置边框样式 */
padding: 10px; /* 可选：设置内边距 */
}
.parent-container {
display: flex;
flex-direction: column; /* 将子元素垂直排列 */
height: 100%; /* 设置父容器高度，确保填充整个容器 */
overflow: auto;
}
.top-section {
height: 100px; /* 控制上部分的高度 */
}
.bottom-section {
flex-grow: 1; /* 填充剩余的高度 */
}
.canvas-container {
overflow: auto;
}
</style>
- PostApi.js
import axios from 'axios';
export async function postData(parsInfo) {
try {
const response = await axios.post('xxxxx/defaultSearch',parsInfo);
// 请求成功，可以从 response 对象中获取数据
const data = response.data;
console.log(data);
return data;
} catch (error) {
// 请求失败，可以处理错误信息
console.error(error);
}
}
- 运行vue
npm run serve
