@[toc]

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-*******

留言板功能

基于valine添加留言板和访问量统计
并引入不蒜子统计
并添加邮件提醒功能

问题记录

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

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

rayxie2046 / vue-running