vue-running在线运行 .vue文件

vue-running

在线运行 .vue文件，支持element-ui、iview。

参考iview-run

用到了iview split面板分割组件、vue-codemirror插件

实现方法

使用了vue的构造器extend与手动挂载$mount

• 将代码进行切割（html，js，css）
• extend 构造的实例通过$mount 渲染后，挂载到了组件唯一的一个节点上。（new Function,extend, $mount ）
• 组件销毁时，手动销毁 extend 构造的实例及style（为便于销毁，添加随机 id 用于标识）。

代码功能

• 支持sublime快捷键 快捷键详情

• 支持代码提示

菜单功能

新增菜单功能，用于存储代码。

项目下的src/components/codeList下，存放自己的代码文件。会自动生成对应的目录，支持多层级目录。

├── element
│   ├── select1.js
│   ├── table-form.js
│   └── test
│       ├── rr
│       │   └── jj.js
│       └── testone.js
├── iview
│   └── test.js
├── index.js   //配置 
└── template.js 

图标配置

在src/components/codeList/index.js,可以添加图标

例子如下

let iconList = {
  template: "ivu-icon ivu-icon-logo-vimeo",
  "element/": "el-icon-eleme",
  "iview/": "ivu-icon ivu-icon-logo-vimeo"
};

Key：是路径。value：图标

为了使用两个ui组件的图标。

目录的图标使用的是<i :class="iconList[item.name]" />

所以iview的图标需要这样写ivu-icon ivu-icon-*******

问题记录

• 1. 路由参数重含有/

想以文件的路径当路由参数（含有/,例如：a/b/c），但是路由解析不了。

所以，用了encodeURIComponent来解决。

• 2. 解决嵌套使用codemirror时，点击才会显示的问题。

created() {
  setTimeout(() => {
    this.$refs.mycodemirror.codemirror.refresh();
  }, 1);
}

• 3. github pages 路由问题

  https://xiaolannuoyi.github.io/vue-running/template刷新后是404。

  修改路由模式为hash

Github pages原生不支持单页面应用，没有为前端路由提供支持，并且为了安全，也不支持自定义后台配置。因此，我们没办法直接配置服务来fallback我们的应用。

参考链接

github地址

项目演示地址1

项目演示地址2