從零開始打造流程圖、拓撲圖專案【Nuxt.js + Element + Vuex】

一 、通過雲開發平臺快速建立初始化應用

1.建立相關應用模版請參考連結： 基於 vue.js 的 SSR 技術—Nuxt.js

// 注意在後面提示中，上移下移，按空格選中 Element

2.完成建立後就可以在github中檢視到新增的Nuxt倉庫

二 、 本地編寫 流程圖、拓撲圖專案

1.將應用模版克隆到本地

● 首先假定你已經安裝了Git、node，沒有安裝請移步node官網進行安裝。克隆專案：

git clone + 專案地址

● 進入專案檔案

cd nuxtJs

● 切換到feature/1.0.0 分支上

git checkout feature/1.0.0

● 安裝依賴包

npm install

● 啟動服務

npm run dev

這裡開啟瀏覽器3000埠，並出現預設頁面。

2.專案框架

選擇Element後，在plugins資料夾下會自帶新增Element的外掛配置

完成後，在nuxt.config.js中配置head相關資訊，主要有兩個阿里字型檔案： 左側工具欄字型檔案： //at.alicdn.com/t/font_1113798_0532l8oa6jqp.css

右側屬性字型圖示： //at.alicdn.com/t/font_1331132_5lvbai88wkb.css

head: {     title: '樂吾樂 Topology - 開源免費繪圖工具',     meta: [       { charset: 'utf-8' },       { name: 'viewport', content: 'width=device-width, initial-scale=1' },       {         hid: 'description',         name: 'description',         content:           '一個基於typescript + canvas的好用開源繪圖工具和繪圖引擎。易整合到自己的前端專案、還可以方便自定義圖形庫，支援微服務架構圖、流程圖、時序圖、活動圖、類圖等'       }     ],     link: [       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },       {         rel: 'stylesheet',         href: '//at.alicdn.com/t/font_1113798_0532l8oa6jqp.css'       },       {         rel: 'stylesheet',         href: '//at.alicdn.com/t/font_1331132_5lvbai88wkb.css'       }     ]   },

3.新增SCSS支援

● 安裝scss的依賴包

yarn add node-sass sass-loader  -D

● 給style標籤加上lang="scss"標記

<style> .page {   width: 100%;   height: 100%; } </style>

4.新增一個全域性公用css

● 在asstes/css資料夾下新建一個base.scss公用全域性樣式檔案

● 匯入 在layouts/default.vue的script指令碼中匯入：

import '~/assets/css/base.scss'

5.網頁佈局

● 頂部導航欄

修改layouts/default.vue為導航欄 + body兩部分

其中： 為Nuxt.js框架中對應頁面路由的檢視部分。

● 修改首頁為左中右三欄

修改pages/index.vue為左中右三欄佈局

6.建立畫布

● 下載topology依賴包

// 先匯入庫 import { Topology, Options, registerNode } from '@topology/core'; import { register as registerFlow } from '@topology/flow-diagram'; import { register as registerActivity } from '@topology/activity-diagram'; import { register as registerClass } from '@topology/class-diagram'; import { register as registerSequence } from '@topology/sequence-diagram'; import { register as registerChart } from '@topology/chart-diagram'; // 註冊圖形庫 canvasRegister() {     registerFlow();     registerActivity();     registerClass();     registerSequence();     registerChart();     // ... }

其中，@topology/core為核心庫引擎，其他的為圖形庫。具體參考：開發文件

● 註冊圖形庫

我們單獨寫個servers/canvas.js服務，用來提供topology相關服務

這裡主要提供註冊和左側工具欄資料。

7.載入圖形庫

● 準備canvas相關資料

data() {     return {   // 左側工具欄       tools: Tools, // 圖形庫       canvas: {}, // 圖形庫選項：{         rotateCursor: '/img/rotate.cur'       }, // 右側屬性欄資料       props: {         node: null,         line: null,         multi: false       }     }   }

● 註冊圖形庫

created() {     canvasRegister() }

● 在父節點已經渲染後，new建立畫布

mounted() {     this.canvasOptions.on = this.onMessage     this.canvas = new Topology('topology-canvas', this.canvasOptions) }

其中，onMessage 表示接受畫布的訊息回撥函式

● 左側工具欄支援滑鼠拖放

<a             v-for="(btn, i) in item.children"             :key="i"             :title="btn.name"             :draggable="btn.data"             @dragstart="onDrag($event, btn)"           >             <i :class="`iconfont ${btn.icon}`"></i>           </a>

methods: {     onDrag(event, node) {       event.dataTransfer.setData('Text', JSON.stringify(node.data))     }   }

只需要給拖放資料設定節點格式的字串即可（畫布自帶支援拖放接收處理），節點資料格式文件：…

8.右側屬性欄

● 自定義屬性欄元件

在components下建立CanvasProps.vue

<template>   <div>   <!-- 選中為空 -->     <div v-if="!props.node && !props.line && !props.multi">       <div>歡迎使用le5le-topology！</div>       <div>         <a href="喜歡，點選這裡打個star吧</a>         <a href="https://ology" target="_blank">使用教程</a>         <br />         <a           href="微信交流群（大群）</a>         <br />         <a href="微信交流群2</a>         <br />         <a href="https://ology/faq#EVbCgt" target="_blank">聯絡我們</a>       </div>       <div>[Todo] 未來規劃</div>       <ul>         <li>Github issues</li>         <li>React demo</li>         <li>Vue3 demo</li>         <li>系列教程</li>       </ul>       <div>         <div>小提示</div>         <ul>           <li>方向鍵：控制節點移動5個畫素</li>           <li>Ctrl + 方向鍵：控制節點移動1個畫素</li>           <li>Ctrl + 滑鼠移動：移動整個畫布</li>           <li>Ctrl + 滑鼠滾輪：縮放</li>           <li>新增或選中節點，右側屬性支援上傳各種圖片哦</li>         </ul>       </div>     </div> <!-- 選中節點 -->     <div v-if="props.node">       <div>位置和大小</div>       <div>         <div class="flex grid">           <div>X（px）</div>           <div>Y（px）</div>         </div>         <div class="flex grid">           <div>             <el-input-number               v-model="props.node.rect.x"               controls-position="right"               @change="onChange"             ></el-input-number>           </div>           <div>             <el-input-number               v-model="props.node.rect.y"               controls-position="right"               @change="onChange"             ></el-input-number>           </div>         </div>       </div>       <div>         <div class="flex grid">           <div>寬（px）</div>           <div>高（px）</div>         </div>         <div class="flex grid">           <div>             <el-input-number               v-model="props.node.rect.width"               controls-position="right"               @change="onChange"             ></el-input-number>           </div>           <div>             <el-input-number               v-model="props.node.rect.height"               controls-position="right"               @change="onChange"             ></el-input-number>           </div>         </div>       </div>     </div>   </div> </template> <script > export default {   data() {     return {}   },   props: {     props: {       type: Object,       require: true     }   },   methods: {     onChange(value) {       this.$emit('change', this.props.node)     }   } } </script>

其中，props.node、line、multi分別表示是否選中節點、連線、多個物件。 這裡我們暫時沒有用到vuex（後面教程介紹），直接使用原生的雙向繫結更簡單。用$emit通知父元件屬性改變事件。

相關屬性值，引數API文件：…

● 引用右側屬性元件

<div>       <CanvasProps :props.sync="props" @change="onUpdateProps"></CanvasProps> </div>

同樣，我們利用.sync關鍵字使用雙向繫結，並接收chang事件，反饋給畫布元件：

onUpdateProps(node) {       // 如果是畫布已選中的節點，無需傳引數       this.canvas.updateProps()              // 如果畫布沒有選中節點，需要傳相關引數，參考：https://ology/canvas#v4OFi       this.canvas.updateProps(true, [node]) }

自此，一個簡單的繪圖專案就完成了。

三 、 雲端一鍵部署上線應用

1.上傳程式碼

git add .  git commit -m '新增你的註釋' git push

2.在日常環境部署

一鍵進行應用部署。在應用詳情頁面點選日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以後可以點選訪問部署網站檢視效果。

3.配置自定義域名線上上環境上線

●  配置線上環境自定義域名。在功能開發驗證完成後要線上上環境進行部署，線上上環境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們新增一個二級域名 company.workbench.fun 來繫結我們部署的前端應用。然後複製自定義域名下方的API閘道器地址對新增的二級域名進行CNAME配置。

●  配置CNAME地址。複製好 API閘道器域名地址後，來到你自己的域名管理平臺（此示例中的域名管理是阿里雲的域名管理控制檯，請去自己的域名控制檯操作）。新增記錄的「記錄型別」選擇「CNAME」，在「主機記錄」中輸入你要建立的二級域名，這裡我們輸入「company」，在「記錄值」中貼上我們之前複製的 API閘道器域名地址，「TTL」保留預設值或者設定一個你認為合適的值即可。

●  線上上環境部署上線。回到雲開發平臺的應用詳情頁面，按照部署的操作，點選線上環境的「部署按鈕」，部署完成以後就在你自定義的域名進行了上線。CNAME 生效之後，我們輸入 company.workbench.fun（示例網址） 可以開啟部署的頁面。至此，如何部署一個應用到線上環境，如何繫結自己的域名來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的域名玩起來吧 ；）

4.專案預覽效果

一鍵建立NuxtJs應用模版連結 ：

參考文獻：