一、安装UI与功能库在终端运行以下命令npm install arco-design/web-vue npm install lucide-vue-next npm install md-editor-v3 npm install pinia axios分别安装预计项目所需的UI库、图标库、编辑器、状态管理功能。检查node版本发现其为过时的v16版本将其更新为v24版本之后重新install依赖二、在src/下新建如图所示目录应对预期需求三、编写核心骨架部分1.在src目录新建style.css设置全局样式html, body, #app { height: 100%; margin: 0; padding: 0; overflow: hidden; }2.之后在layout文件夹下新建MainLayout.vue(代码部分省略该文件定义了主界面布局分为导航栏目录编辑器三部分3.在views文件夹下新建HomeView.vue该文件中集成Markdown编辑器template MainLayout template #content 集成 Markdown 编辑器 MdEditor v-modelcontent styleheight: 100% onSavehandleSave preview-themegithub / /template /MainLayout /template script setup import { ref } from vue; import MainLayout from /layout/MainLayout.vue; import { MdEditor } from md-editor-v3; import md-editor-v3/lib/style.css; const content ref(# 欢迎使用智汇笔记\n你好); const handleSave (val) { console.log(手动保存内容:, val); }; /script4.配置main.js加载使用的Arco Design样式import { createApp } from vue import { createPinia } from pinia import ArcoVue from arco-design/web-vue import arco-design/web-vue/dist/arco.css import ./style.css import App from ./App.vue import router from ./router const app createApp(App) app.use(createPinia()) app.use(router) app.use(ArcoVue) app.mount(#app)5.修改原App.vue将其原有代码清空只保留路由出口template router-view / /template四、配置路由修改router/index.js,使根路由指向刚刚编写的index.jsimport { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView } ] }) export default router五、运行展示做完以上工作后在终端运行npm run dev跳转到网页查看成果如图所示