vscode-drawio插件——用vscode画流程图
❤️ 身为前端开发, 能用vscode绘制流程图, 插件vscode-drawio简直贴心~
vscode编译调用32位dll
1、首先vscode编译调用32位dll的软件开启并登录的账户。
2、其次在软件内找到vscode的编译器，并选择调用32位dll。
3、最后点击保存即可。
VSCode Drawio 画流程图
hediet / vscode-drawio 可以实现在 vscode 中画图。
打开 VSCode，点击最左侧底部的 Extensions，搜索 draw.io，找到其中的 Draw.io Integration ：
安装其他扩展没什么区别。建议安装完后重启下 VSCode。
创建一个文件： test.drawio ，打开后，自动是如下界面：
之后你就可以跟很多其他画图工具一样，拖拽画图了。
是不是很简单！不仅仅如此，它还是免登录，跨平台，完全免费的！
vscode-drawio 支持编辑 .drawio , .dio , .drawio.svg 或者 .drawio.png 文件。为了创建一个新的 diagram，金需要创建并打开一个空白的 *.drawio , *.drawio.svg 或者 *.drawio.png 文件即可。
.drawio.svg 文件是一个有效的 SVG 文件，它可以直接嵌入到 Github README 文件中，无需导出！其他功能可以自行摸索。
vscode配置文件的关系
简单来说,vscode是一款文本编辑器,而不是ide。这就是说,vscode只提供编辑的环境而不提供编译的环境,如果想要用vscode来集成开发环境,则必须经过以下几步:
安装必须的编译器(比如mingw,python,texlive等)
配置相应编译环境(添加环境变量等)
安装匹配的vscode的拓展插件
通过拓展插件提供的“属性”将外部编译器链接到vscode
同时,一个文本编辑器肯定不会提供运行程序的功能,vscode也是如此。要运行程序,有如下几种方法:
vscode的一些拓展插件中会提供配置好的终端和运行程序的命令,我们可以直接使用;
vscode中有专门运行程序的拓展插件code-runner,可以安装后使用;
vscode提供了对数种终端的接口,我们可以在vscode中像使用cmd小黑框那样使用终端,由此我们可以在vscode终端中运行程序;
这样,我们大致了解了使用vscode编译、运行程序的方法。
vscode的配置
首先,我们要明确vscode的配置的最小单元是文件夹,即可以使用打开文件夹功能我们可以把不同的文件夹链接到不同的外部编译器、实现不同的快捷任务、快速进行debug和详细设定拓展插件的功能等等。
因此,我们先速览vscode的配置结构,如下图:
可以看到,
vscode下有全局设置settings.json;之后是工作区,和工作区设置settings.json,一个工作区包含了多个文件夹;
每个文件夹中有相同的.vscode文件夹,这个文件夹中的三个文件settings.json,tasks.json,launch.json,它们就是配置的核心。
每个文件夹通过配置可以编译运行不同语言的文件:c++,python和html,同时可以通过同一个工作区直接访问,这就是vscode的集成性和方便性。
用vscode怎么设置柱状图和多系列柱状图
1、首先：在编辑器(我使用的是vscode)的终端输入命令行npm install echarts --save,安装Echarts
2、其次：在入口文件main.js里面引入，import echarts from 'echarts' Vue.prototype.$echarts = echarts
3、最后：
在html页面加入放置饼状图和柱状图的div，但是必须为div设置宽和高；
!-- 饼状图 --
div id = "myPie" :style = " {width: '600px' ,height: '500px' ,left: '80px' } " / div
/ div
!-- 柱状图 --
div style = "display:inline-block;left:230px;" id = "myBar" :style = " {width: '600px' ,height: '500px' ,} " / div
在js中引入
script
export default {
data(){
return{
monthNumber: [],
monthRevenue: [],
}
}
mounted() {
this .queryRecentlyMonth();
this .monthNumber = this .calculateMonth();
this .queryRevenueExpenditureData();
},
methods:{
//初始化数据
