AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue整合kitymind百度脑图-引用打包文件方案

2024-03-15 227
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue整合kitymind百度脑图-引用打包文件方案

前言

项目为前端vue项目，把kitymind百度脑图整合到前端vue项目中，显示了脑图的绘制，编辑，到处为json，png，text等格式的功能

文章末尾有相关的代码链接，代码只包含前端项目，在原始的项目中也编写了相关的接口，但是原先的后端项目是公司的，不方便公开出来，这里只提供我新写的前端项目，刚兴趣的同学可以把后端实现。

项目目录

项目的核心逻辑在public包下的local-kitymind文。件夹中，vue页面只是做了简单的引用，核心逻辑写在了diy.js与index.html两个文件当中

下面是功能介绍以及相关实现。

脑图编辑页面

主页面展示

用户可以在编辑页编辑脑图文件，支持导出为各种格式，也可导入json文件,到处test，png，md，json等格式的文件，我个人新增了 “保存” 和 “内存为” 的按钮，在原系统中可以同后端进行交互，实现json信息的入库。

保存：

自动显示当前脑图所属版本，要求用户输入脑图名称和脑图描述，脑图名称为必填项

另存为：

用户点击另存为按钮，出现弹窗，要求用户输入脑图名称，描述，新建版本名称，新建版本描述，

功能实现

diy.js

在diy.js文件中我们定义了最上层若干按钮的样式以及对应的函数。

若干个导出按钮与导入导入按钮没有与后端交互，调用了百度脑图的api，另存为和保存按钮调用了在index.html中定义的vue函数，使得页面出现弹窗，同时将脑图的json转化为字符串保存在浏览器的localStorage中。下面是代码

(function () {
    var oldData;
    var baseURL =  'http://localhost:12222';
    // var baseURL = 'http://10.20.26.231:12222';
    var html = '';
    html += '<a href="" class="diy export" data-type="json">导出json</a>',
    html += '<a href="" class="diy export" data-type="md">导出md</a>',
    html += '<a href="" class="diy export" data-type="km">导出km</a>',
    html += '<a href="" class="diy export" data-type="svg">导出svg</a>',
    html += '<a href="" class="diy export" data-type="txt">导出text</a>',
    html += '<a href="" class="diy export" data-type="png">导出png</a>',
    html += '<button class="diy input">',
    html += '导入<input type="file" id="fileInput" accept=".km,.txt,.md,.json" >',
    html += '</button>'
    html += '<button class="diy httpinput">保存</button>',
    html += '<button class="diy httpinput2">另存为</button>',
 
    $('.editor-title').append(html);
 
    $('.diy').css({
        // 'height': '30px',
        // 'line-height': '30px',
        'margin-top': '0px',
        'float': 'right',
        'background-color': '#fff',
        'min-width': '60px',
        'text-decoration': 'none',
        color: '#999',
        'padding': '0 10px',
        border: 'none',
        'border-right': '1px solid #ccc',
    });
    $('.input').css({
        'overflow': 'hidden',
        'position': 'relative',
    }).find('input').css({
        cursor: 'pointer',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        display: 'inline-block',
        opacity: 0
    });
    // $('.httpinput').css({
    //     'overflow': 'hidden',
    //     'position': 'relative',
    // }).find('httpinput').css({
    //     cursor: 'pointer',
    //     position: 'absolute',
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0,
    //     display: 'inline-block',
    //     opacity: 0
    // });
    $('.httpinput2').css({
        'overflow': 'hidden',
        'position': 'relative',
    }).find('httpinput2').css({
        cursor: 'pointer',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        display: 'inline-block',
        opacity: 0
    });
 
    $(document).on('click', '.export', function (event) {
        event.preventDefault();
        var $this = $(this),
        type = $this.data('type'),
        exportType;
        switch (type) {
        case 'km':
            exportType = 'json';
            break;
        case 'md':
            exportType = 'markdown';
            break;
        case 'svg':
            exportType = 'svg';
            break;
        case 'txt':
            exportType = 'text';
            break;
        case 'png':
            exportType = 'png';
            break;
        default:
            exportType = type;
            break;
        }
 
        editor.minder.exportData(exportType).then(function (content) {
            switch (exportType) {
            case 'json':
                console.log($.parseJSON(content));
                break;
            default:
                console.log(content);
                break;
            }
            var blob = new Blob();
            switch (exportType) {
            case 'png':
                blob = dataURLtoBlob(content); //将base64编码转换为blob对象
                break;
            default:
                blob = new Blob([content]);
                break;
            }
            var a = document.createElement("a"); //建立标签，模拟点击下载
            a.download = $('#node_text1').text() + '.' + type;
            a.href = URL.createObjectURL(blob);
            a.click();
 
        });
    });
    //保存
    $(document).on('click', '.httpinput', async function (event) {
        // ct = await editor.minder.exportData('json')
    // console.log('shangyi');
 
        var ct;
    console.log('-------insert start-----')
    editor.minder.exportData('json').then(function (content) {
      ct = content;
            // console.log(ct)
            localStorage.setItem('brainJson',ct)
    });
        
        // console.log(version)
 
        myApp.openDialog()
         
    });
    //另存为
    $(document).on('click', '.httpinput2', async function (event) {
    console.log('shangyi');
 
        var ct;
    console.log('-------insert start-----')
    editor.minder.exportData('json').then(function (content) {
      ct = content;
            // console.log(ct)
            localStorage.setItem('brainJson',ct)
    });
        
        // console.log(version)
 
        myApp.openDialog2()
         
    });
 
    // 导入
    window.onload = function () {
        var fileInput = document.getElementById('fileInput');
 
        fileInput.addEventListener('change', function (e) {
            var file = fileInput.files[0],
            // textType = /(md|km)/,
            fileType = file.name.substr(file.name.lastIndexOf('.') + 1);
            console.log(file);
            switch (fileType) {
            case 'md':
                fileType = 'markdown';
                break;
            case 'txt':
                fileType = 'text';
                break;        
            case 'km':
            case 'json':
                fileType = 'json';
                break;
            default:
                console.log("File not supported!");
                alert('只支持.km、.md、、text、.json文件');
                return;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                var content = reader.result;
                editor.minder.importData(fileType, content).then(function (data) {
                    console.log(data)
                    $(fileInput).val('');
                });
            }
            reader.readAsText(file);
        });
    }
 
})();
 
//base64转换为图片blob
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(',');
    //注意base64的最后面中括号和引号是不转译的
    var _arr = arr[1].substring(0, arr[1].length - 2);
    var mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(_arr),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}
index.html文件

我们定义了页面标题等信息，引入kityminder-editor这个标签，同时使用elements-ui写了两个保存窗口 ，用户在“保存” 和 “另存为” 窗口可以点击“保存”按钮，则调用axios请求将json字符串发送至后端。

在发送请求的同时也会携带当前登陆者的信息，登陆者的信息是存储在cookie中，调用函数 getCookie('employeeId') 可以实现，但是用户这部分功能为公司项目，在我提供的代码中并未体现。

这里介绍一下 document.addEventListener 这个函数，在项目中他起到了初始化页面的作用，原先的项目逻辑为在 脑图管理页面 点击一条脑图信息，则讲相关信息存储到浏览器的localStorage中，然后调用脑图初始化的api，将json渲染到页面上,从而实现脑图的管理与跳转。下面是整体代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>KityMinder Editor</title>
 
  <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
 
  <!-- bower:css -->
  <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="./bower_components/codemirror/lib/codemirror.css" />
  <link rel="stylesheet" href="./bower_components/hotbox/hotbox.css" />
  <link rel="stylesheet" href="./bower_components/kityminder-core/dist/kityminder.core.css" />
  <link rel="stylesheet" href="./bower_components/color-picker/dist/color-picker.min.css" />
  <!-- endbower -->
 
  
 
  <link rel="stylesheet" href="kityminder.editor.min.css">
 
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    h1.editor-title {
      background: #393F4F;
      color: white;
      margin: 0;
      height: 40px;
      font-size: 14px;
      line-height: 40px;
      font-family: 'Hiragino Sans GB', 'Arial', 'Microsoft Yahei';
      font-weight: normal;
      padding: 0 20px;
    }
    div.minder-editor-container {
      position: absolute;
      top: 40px;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>
 
<body ng-app="kityminderDemo" ng-controller="MainController">
  
<h1 class="editor-title">
  <a href="http://www.huangyebo.cn" style="color: #fff;" target="_blank">
    KityMinder Editor
  </a>
<a href="https://beian.miit.gov.cn/" target="_blank"></a>
</h1>
 
<kityminder-editor on-init="initEditor(editor, minder)" data-theme="fresh-green"></kityminder-editor>
<iframe name="frameFile" style="display:none;"></iframe>
 
<div id="app">
  <el-dialog :visible.sync="dialogVisible" title="脑图保存">
 
    <el-form ref="form" :model="BrainMap" label-width="80px">
      <el-form-item label="脑图名称">
        <el-input required="required" v-model="BrainMap.name"></el-input>
      </el-form-item>
      <el-form-item label="脑图描述">
        <el-input v-model="BrainMap.description"></el-input>
      </el-form-item>
      
      <el-form-item label="脑图版本">
        <el-col :span="8">
        <el-input readonly v-model="BrainMap.version"></el-input>
        </el-col>
      </el-form-item>
 
    
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
      </el-form>
 
  </el-dialog>
 
  <el-dialog :visible.sync="dialogVisible" title="另存为">
 
    <el-form ref="form" :model="BrainMap" label-width="80px">
      <el-form-item label="脑图名称">
        <el-input required="required" v-model="BrainMap.name"></el-input>
      </el-form-item>
      <el-form-item label="脑图描述">
        <el-input v-model="BrainMap.description"></el-input>
      </el-form-item>
      
      <el-form-item label="版本名称">
        <el-col >
        <el-input  v-model="versionName"></el-input>
        </el-col>
      </el-form-item>
 
      <el-form-item label="版本描述">
        <el-col >
          <el-input  v-model="versionDescription"></el-input>
        </el-col>
        </el-form-item>
 
    
      <el-form-item>
        <el-button type="primary" @click="saveVersion">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
      </el-form>
 
  </el-dialog>
</div>
 
<div>
</div>
</body>
 
<!-- bower:js -->
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/codemirror/lib/codemirror.js"></script>
<script src="./bower_components/codemirror/mode/xml/xml.js"></script>
<script src="./bower_components/codemirror/mode/javascript/javascript.js"></script>
<script src="./bower_components/codemirror/mode/css/css.js"></script>
<script src="./bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="./bower_components/codemirror/mode/markdown/markdown.js"></script>
<script src="./bower_components/codemirror/addon/mode/overlay.js"></script>
<script src="./bower_components/codemirror/mode/gfm/gfm.js"></script>
<script src="./bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
<script src="./bower_components/marked/lib/marked.js"></script>
<script src="./bower_components/kity/dist/kity.min.js"></script>
<script src="./bower_components/hotbox/hotbox.js"></script>
<script src="./bower_components/json-diff/json-diff.js"></script>
<script src="./bower_components/kityminder-core/dist/kityminder.core.min.js"></script>
<script src="./bower_components/color-picker/dist/color-picker.min.js"></script>
<!-- endbower -->
 
<script src="kityminder.editor.min.js"></script>
<script src="diy.js"></script>
 
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入 Element-UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Element-UI 组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
 
<script>
  var baseURL =  'http://localhost:12222';
    // var baseURL = 'http://10.20.26.231:12222';
 
  angular.module('kityminderDemo', ['kityminderEditor'])
  .controller('MainController', function($scope) {
    $scope.initEditor = function(editor, minder) {
      window.editor = editor;
      window.minder = minder;
    };
  });
 
  function getCookie(name){
    var strcookie = document.cookie;//获取cookie字符串
    var arrcookie = strcookie.split("; ");//分割
    //遍历匹配
    console.log(arrcookie)
    for ( var i = 0; i < arrcookie.length; i++) {
      var arr = arrcookie[i].split("=");
      if (arr[0] == name){
        return arr[1];
      }
    }
    return "";
  }
 
  var myApp = new Vue({
      el: '#app',
      data() {
        return {
          dialogVisible: false, // 控制弹窗的显示和隐藏
      versionDescription:'',
      versionName:'',
      BrainMap: {
        name: '',
        version: '',
        description: '',
        Json:'',
        employeeId:'',
      },
    
        }
      },
      methods: {
        openDialog() { //保存到旧版本
          this.dialogVisible = true; // 打开弹窗
      this.BrainMap.version = localStorage.getItem('version')
        },
    openDialog2() { //另存为
          this.dialogVisible = true; // 打开弹窗
    //   this.BrainMap.version = localStorage.getItem('version')
        },
    onSubmit() {
      console.log('save!');
      this.BrainMap.Json = localStorage.getItem('brainJson')
      this.BrainMap.employeeId = getCookie('employeeId')
      if(this.BrainMap.name===''){
        this.$message({message:'脑图名不为空',type:'warning'})
        return
      }
 
      axios({
        method: 'POST',
        url: baseURL+'/common/saveBrainVersion',
        data: {
          json:this.BrainMap.Json,
          version:this.BrainMap.version,
          name: this.BrainMap.name,
          description: this.BrainMap.description,
          employeeId:this.BrainMap.employeeId,
        }
        })
        .then(response => {
          console.log( response)
        
        }, error => {
          console.log('错误', error.message)
      })
 
      this.dialogVisible = false
    },
    saveVersion() {
      var versionId = 0
      axios({
        method: 'get',
        url: baseURL+'/common/versionMaxId',
        params: {
                    }
        })
        .then(response => {
          versionId = response.data.data.id
 
          this.BrainMap.version = versionId + 1
          console.log(this.BrainMap.version)
          this.onSubmit()
        
        }, error => {
          console.log('错误', error.message)
      })
 
 
      axios({
        method: 'get',
        url: baseURL+'/common/saveVersion',
        params: {
                        versionName: this.versionName,
            description: this.versionDescription
                    }
        })
        .then(response => {
          console.log( response)
        
        }, error => {
          console.log('错误', error.message)
      })
      
      this.dialogVisible = false
    },
      }
    });
 
  document.addEventListener("DOMContentLoaded", function() {
      // 在页面加载完成后执行的 JavaScript 代码
      // 发起请求
    console.log("监听页面初始化")
    // var content = '{"root":{"data":{"id":"ctojgfitvug0","created":1687981368534,"text":"shangyi"},"children":[]},"template":"default","theme":"fresh-blue","version":"1.4.33"} '
    var content = localStorage.getItem('brainJson')
    editor.minder.importData('json', content).then(function (data) {
            // console.log(data)
        });
    });
</script>
 
 
</html>

项目链接：

脑图编辑管理系统前端: 基于百度脑图的二次开发，将百度脑图整合到vue中去，可以直接引入自己的项目

文章标签：
JavaScript
数据格式
JSON
前端开发
存储
关键词：
文件方案VUE.js
vue方案VUE.js
方案VUE.js
打包文件VUE.js
肖宜
目录
相关文章
34789737
|
9天前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
96 17
34789737
|
7天前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
35 1
34789737
|
9天前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
35 0
34789737
|
9天前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
22 0
凌浩雨
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
凌浩雨
1132 0
小宋1021
|
2月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
242 4
34789737
|
14天前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
95 21
34789737
|
12天前
|
监控 JavaScript 前端开发
Vue 文件批量下载组件封装完整使用方法及优化方案解析
本文详细介绍了批量下载功能的技术实现与组件封装方案。主要包括两种实现方式：**前端打包方案（基于file-saver和jszip）** 和 **后端打包方案**。前者通过前端直接将文件打包为ZIP下载，适合小文件场景；后者由后端生成ZIP文件流返回，适用于大文件或大量文件下载。同时，提供了可复用的Vue组件`BatchDownload`，支持进度条、失败提示等功能。此外，还扩展了下载进度监控和断点续传等高级功能，并针对跨域、性能优化及用户体验改进提出了建议。可根据实际需求选择合适方案并快速集成到项目中。
34789737
94 17
游客tsrksm3mlhq4y
|
2月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
游客tsrksm3mlhq4y
137 57
34789737
|
13天前
|
JavaScript 前端开发 UED
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件，可节省页面空间、提升用户体验。本文介绍三种实现方式：1) 原生Vue结合数据绑定与CSS动画；2) 使用Element UI等组件库快速构建；3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景，可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示，灵活满足多样需求。附代码示例与资源链接，助你高效实现手风琴功能。
34789737
46 10

热门文章

最新文章

  • 1
    Vue 文件批量下载组件封装完整使用方法及优化方案解析
  • 2
    通义灵码2.5实战评测：Vue.js贪吃蛇游戏一键生成
  • 3
    基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
  • 4
    Vue 自定义进度条组件封装及使用方法详解
  • 5
    Vue 2 与 Vue 3 的区别：深度对比与迁移指南
  • 6
    Vue 表情包输入组件的实现代码：支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
  • 7
    Vue 手风琴实现的三种常用方式及长尾关键词解析
  • 8
    如何高效实现 vue 文件批量下载及相关操作技巧
  • 9
    Vue 表情包输入组件实现代码及详细开发流程解析
  • 10
    Vue框架中常见指令的应用概述。
  • 1
    Vue 表情包输入组件实现代码及详细开发流程解析
    35
  • 2
    Vue 自定义进度条组件封装及使用方法详解
    96
  • 3
    如何高效实现 vue 文件批量下载及相关操作技巧
    35
  • 4
    Vue 项目中如何自定义实用的进度条组件
    22
  • 5
    Vue框架中常见指令的应用概述。
    23
  • 6
    Vue 文件批量下载组件封装完整使用方法及优化方案解析
    94
  • 7
    Vue 表情包输入组件的实现代码：支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
    58
  • 8
    Vue 手风琴实现的三种常用方式及长尾关键词解析
    46
  • 9
    基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
    95
  • 10
    通义灵码2.5实战评测：Vue.js贪吃蛇游戏一键生成
    93

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    一文了解：阿里云对象存储OSS是什么？