|
@@ -0,0 +1,117 @@
|
|
|
+# PlantUML
|
|
|
+
|
|
|
+::: details 目录
|
|
|
+[[toc]]
|
|
|
+:::
|
|
|
+
|
|
|
+## 简介
|
|
|
+PlantUML是一个用来绘制UML图的Java类库。支持的UML图包括:时序图、用例图、类图、组件图、活动图等。
|
|
|
+
|
|
|
+## 示例
|
|
|
+
|
|
|
+<PPlantUML src="/uml/test1.puml" />
|
|
|
+
|
|
|
+::: details 查看代码
|
|
|
+
|
|
|
+<<< @/docs/.vuepress/public/uml/test1.puml
|
|
|
+
|
|
|
+:::
|
|
|
+
|
|
|
+## 开发环境
|
|
|
+
|
|
|
+### 安装
|
|
|
+
|
|
|
+#### IDE
|
|
|
+
|
|
|
+<a href="/web/setup/ide/idea.html" target="_blank">IDE安装地址</a>
|
|
|
+
|
|
|
+#### VS Code
|
|
|
+
|
|
|
+<a href="/web/setup/ide/vscode.html" target="_blank">VS Code安装地址</a>
|
|
|
+
|
|
|
+#### Node NPM
|
|
|
+
|
|
|
+<a href="https://nodejs.org/en/" target="_blank">node安装地址</a>
|
|
|
+
|
|
|
+检测Node.js是否安装成功,Node安装自带npm包管理工具。打开cmd命令行(win + r), 输入 node - v 显示当前Node版本号,npm -v 显示当前npm版本号。
|
|
|
+
|
|
|
+
|
|
|
+```shell script
|
|
|
+node -v
|
|
|
+v12.18.4
|
|
|
+
|
|
|
+npm -v
|
|
|
+6.14.6
|
|
|
+```
|
|
|
+* 注:版本号只用来证明安装成功,版本不定时更新,版本无需统一。
|
|
|
+
|
|
|
+### 插件配置
|
|
|
+IDE插件安装 ( File --> Settings --> Plugins )
|
|
|
+
|
|
|
+![搜索plantUML插件](./../img/umlPlugins.png)
|
|
|
+
|
|
|
+![plantUML成功状态](./../img/umlRestart.png)
|
|
|
+
|
|
|
+IDE安装成功验证
|
|
|
+
|
|
|
+![安装plantUML并重启](./../img/umlInstalled.png)
|
|
|
+
|
|
|
+
|
|
|
+vscode插件安装
|
|
|
+
|
|
|
+![安装plantUML插件](./../img/vscodeUML.png)
|
|
|
+
|
|
|
+vscode安装成功验证
|
|
|
+
|
|
|
+![安装plantUML成功](./../img/vscodeUMLSuccess.png)
|
|
|
+
|
|
|
+### 项目使用方法
|
|
|
+
|
|
|
+修改项目文件 “package.json”。在 “dependencies” 项目下增加 "@persagy-vue-doc"依赖。
|
|
|
+
|
|
|
+``` javascript
|
|
|
+"dependencies": {
|
|
|
+
|
|
|
+......
|
|
|
+
|
|
|
+"@persagy-vue-doc": "^1.1.21",
|
|
|
+
|
|
|
+......
|
|
|
+
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+* 注:版本不定时更新,版本号请根据发布的最新版本修改。
|
|
|
+
|
|
|
+在 Windows 控制台cmd命令行(win + r) 或 IDE 开发环境的控制台窗口,切换到文档项目所在文件夹。执行以下安装命令。
|
|
|
+
|
|
|
+``` shell
|
|
|
+npm install
|
|
|
+```
|
|
|
+* 注: 若安装失败,检测当前镜像
|
|
|
+```shell script
|
|
|
+npm config get registry
|
|
|
+http://dev.dp.sagacloud.cn:8082/repository/npm-saga/
|
|
|
+
|
|
|
+若镜像地址不是 http://dev.dp.sagacloud.cn:8082/repository/npm-saga/ 则修改镜像地址,命令如下:
|
|
|
+
|
|
|
+npm config set registry http://dev.dp.sagacloud.cn:8082/repository/npm-saga/
|
|
|
+
|
|
|
+修改后,再次执行
|
|
|
+
|
|
|
+npm install
|
|
|
+```
|
|
|
+ 引入组件,修改项目文件 “docs/.vuepress/enhanceApp.js“,如果不存在则创建该文件。
|
|
|
+
|
|
|
+```javascript
|
|
|
+import Vue from "vue";
|
|
|
+import PDoc from "persagy-vue-doc";
|
|
|
+Vue.use(PDoc);
|
|
|
+```
|
|
|
+* 注:import 引入,Vue.use挂载。
|
|
|
+
|
|
|
+plantUML使用
|
|
|
+```html
|
|
|
+<PPlantUML src="/uml/test1.puml" />
|
|
|
+```
|
|
|
+* 注:src指向当前文件路径
|