在項目目錄文件下，通過cmd運行下述指令。
npm create vue@latest
cd vue-projectnpm installnpm run format
npm run dev或
npm init vue@latest
cd vue-prjectnpm run build --打包項目創建項目沒有node_modules
npm init -y
npm install vue-routernpm install markmap-lib
npm install markmap-render
npm install markmap-view
npm install markmap-cli
npm install markmap-toolbar
npm install coc-markmap
npm i markmap-autoloade項目結構：
/** @creater: geovindu* @since: 2025-06-24 22:22:55* @LastAuthor: geovindu* @lastTime: 2025-06-24 22:23:29* @文件相對于項目的路徑: \jsstudy\markmapdemo\src\views\markmap.ts* @message: geovindu* @IDE: vscode* @Development: node.js 20, vuejs3.0* @package:* @ISO: windows10* @database: mysql 8.0 sql server 2019 postgresSQL 16* Copyright (c) 2025 by geovindu email:geovindu@163.com, All Rights Reserved.*/
import { loadJS, loadCSS } from 'markmap-common';
import { Transformer } from 'markmap-lib';
import * as markmap from 'markmap-view';// 定義類型
type LoadJS = (scripts: string[],options: { getMarkmap: () => typeof markmap }
) => Promise<void>;type LoadCSS = (styles: string[]) => void;// 創建轉換器實例
export const transformer = new Transformer();
const { scripts, styles } = transformer.getAssets();// 加載資源
const loadJSWithType: LoadJS = (scripts, options) => {return loadJS(scripts, options);
};const loadCSSWithType: LoadCSS = (styles) => {loadCSS(styles);
};loadCSSWithType(styles);
loadJSWithType(scripts, { getMarkmap: () => markmap });<!--* @creater: geovindu* @since: 2025-06-24 22:24:23* @LastAuthor: geovindu* @lastTime: 2025-06-24 22:39:38* @文件相對于項目的路徑: \jsstudy\markmapdemo\src\views\VueComposition.vue* @message: geovindu* @IDE: vscode* @Development: node.js 20, vuejs3.0* @package:* @ISO: windows10* @database: mysql 8.0 sql server 2019 postgresSQL 16* Copyright (c) 2025 by geovindu email:geovindu@163.com, All Rights Reserved.
-->
<template><div class="flex-1"><textarea class="w-full h-full border border-gray-400" v-model="value" /></div><svg class="flex-1" ref="svgRef" /></template><script lang="ts" setup>import { ref, onMounted, onUpdated } from 'vue';import { Markmap } from 'markmap-view';import { transformer } from './markmap';// 定義類型type MarkmapInstance = Markmap;const initValue = `# 中國行政區劃
## 北京市
### 市轄區
#### 東城區
##### 五道口街道
###### 教苑社區
- 林海花園
- 江海花園
- 學清苑小區
## 江西省
### 吉安市
#### 永豐縣
##### 沿陂鎮
###### 涂家村委
- 涂家村
- 艾家村
- 黃家村
## 廣東省
### 深圳市
#### 羅湖區
##### 東曉街道
###### 蘭心社區
- 江海花園
- 江心花園
- 蘭亭國際
###### 田心社區
- 田心村
- 東曉花園
- 鹿鳴園
##### 桂園街道
###### 大塘龍社區
- 大塘龍小區
- 萬科桂苑
- 天地大廈`;const svgRef = ref<SVGSVGElement | null>(null);const value = ref<string>(initValue);let mm: MarkmapInstance | null = null;const update = async () => {if (!mm || !svgRef.value) return;try {const { root } = transformer.transform(value.value);await mm.setData(root);mm.fit();} catch (error) {console.error('更新Markmap失敗:', error);}};onMounted(() => {if (svgRef.value) {mm = Markmap.create(svgRef.value);update();}});onUpdated(update);</script><style scoped>textarea {font-family: monospace;font-size: 14px;}</style><!--* @creater: geovindu* @since: 2025-06-24 22:23:43* @LastAuthor: geovindu* @lastTime: 2025-06-24 22:37:14* @文件相對于項目的路徑: \jsstudy\markmapdemo\src\views\VueLegacy.vue* @message: geovindu* @IDE: vscode* @Development: node.js 20, vuejs3.0* @package:* @ISO: windows10* @database: mysql 8.0 sql server 2019 postgresSQL 16* Copyright (c) 2025 by geovindu email:geovindu@163.com, All Rights Reserved.
-->
<template><div class="flex flex-col h-screen"><div class="flex-1 flex"><textareaclass="w-full h-full border border-gray-400 p-2"v-model="value"placeholder="輸入 Markdown 內容..."/><svg ref="svgRef" class="w-full h-full border border-gray-400" /></div></div>
</template><script lang="ts" setup>
import { ref, onMounted, onUpdated, watch } from 'vue';
import { Markmap } from 'markmap-view';
import { transformer } from './markmap';// 定義類型
type MarkmapInstance = Markmap;// 初始值和狀態
const initValue = `# 中國行政區劃
## 北京市
### 市轄區
#### 東城區
##### 五道口街道
###### 教苑社區
- 林海花園
- 江海花園
- 學清苑小區
## 江西省
### 吉安市
#### 永豐縣
##### 沿陂鎮
###### 涂家村委
- 涂家村
- 艾家村
- 黃家村
## 廣東省
### 深圳市
#### 羅湖區
##### 東曉街道
###### 蘭心社區
- 江海花園
- 江心花園
- 蘭亭國際
###### 田心社區
- 田心村
- 東曉花園
- 鹿鳴園
##### 桂園街道
###### 大塘龍社區
- 大塘龍小區
- 萬科桂苑
- 天地大廈
`;const value = ref(initValue);
const svgRef = ref<SVGSVGElement | null>(null);
let mm: MarkmapInstance | null = null;// 更新 Markmap
const update = async () => {if (!mm || !svgRef.value || !value.value) return;try {const { root } = transformer.transform(value.value);await mm.setData(root);mm.fit();} catch (err) {console.error('更新 Markmap 失敗:', err);}
};// 初始化 Markmap
onMounted(() => {if (svgRef.value) {mm = Markmap.create(svgRef.value);update();}
});// 監聽值變化并更新 Markmap
watch(value, update);// 組件更新后調整 Markmap
onUpdated(() => {if (mm && svgRef.value) {mm.fit();}
});
</script><style scoped>
textarea {font-family: monospace;font-size: 14px;resize: none;
}
</style><!--* @creater: geovindu* @since: 2025-06-24 22:24:23* @LastAuthor: geovindu* @lastTime: 2025-06-24 22:43:26* @文件相對于項目的路徑: \jsstudy\markmapdemo\src\views\displayview.vue* @message: geovindu* @IDE: vscode
*npm install markmap-lib
*npm install markmap-render
*npm install markmap-view
*npm install markmap-cli
*npm install markmap-toolbar
*npm install coc-markmap
* npm i markmap-autoloade* @Development: node.js 20, vuejs3.0* @package:* @ISO: windows10* @database: mysql 8.0 sql server 2019 postgresSQL 16* Copyright (c) 2025 by geovindu email:geovindu@163.com, All Rights Reserved.
-->
<template><div class="flex flex-col h-screen p-2"><select class="border border-gray-400" v-model="type"><option value="composition">Composition API</option><option value="legacy">Legacy</option></select><component :is="currentComponent" class="flex-1" /></div>
</template><script lang="ts" setup>
import { ref, computed } from 'vue';
import VueComposition from './VueComposition.vue';
import VueLegacy from './VueLegacy.vue';// 定義類型
type ComponentType = 'composition' | 'legacy';const type = ref<ComponentType>('composition');
const currentComponent = computed(() => {return {composition: VueComposition,legacy: VueLegacy,}[type.value];
});
</script><style scoped>
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.0/dist/tailwind.min.css');select {padding: 0.5rem;font-size: 1rem;margin-bottom: 0.5rem;
}
</style>
