搭博客遇到的坑

记录一些BUG和难点，

打包配置
多个项目不可能都是打包成dist，所以要去修改配置文件打包成A，B，C...
把打包出来的文件夹直接丢到服务器的nginx就行，然后访问www.xx.com/A或者www.xx.com/B就行
如果不想看到文件夹的名字，想使用二级域名，查看Nginx笔记的《二级域名》

富文本编辑器
官方文档下载地址
官方文档document版本使用指南，各个版本的使用代码不一样，要使用别的版本请查看文档，或者百度

// 官网没有config配置，加上去
<ckeditor v-model="value" :editor="editor" :config="config" @ready="onReady"></ckeditor>

// 官网里没有这一句，加上去
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn';

// 这个是data里的配置
editorConfig: {
     language: "zh-cn",
     // 上传图片的配置，后面是接口，因为不是经过proxy，所以要直接写线上全地址
     ckfinder: {
        uploadUrl: "http://www.xx.com/xx"
    },
}

methods: {
     // 这个参数 editor 就是代表了这个编辑器的核心
     onReady( editor )  {
        // Insert the toolbar before the editable area.
        editor.ui.getEditableElement().parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
        );
        // 一定要等编辑器加载完再显示数据不然会报错
        // 所以可以在这个进行数据请求getData
    }
}
</script>

官方规定上传接口的返回值必须是

{ 
  "uploaded" : 1 ,
  "url" : "图片地址" 
}

但是官方也没说出来，是网友看的源码自己找到的，网友的文章

markdown
官方文档

<mavon-editor  ref=md  v-model="value"
               @imgAdd="$imgAdd" 
               @imgDel="$imgDel"
               :ishljs="true" 
               :codeStyle="codeStyle" />
<!-- 
ishljs是开启代码高亮 
codeStyle是代码高亮风格，在官网的codeStyle参数里有个连接可以去找自己喜欢的风格，字符串传进去就行 
-->
methods:{
    $imgAdd(pos, $file){
      // 将图片上传到服务器.
      var formdata = new FormData();
      formdata.append('file', $file);
      upload(formdata).then((res) => {
        this.$refs.md.$img2Url(pos,res.url);
      })
    },
    $imgDel(pos) {
      delete this.img_file[pos];
    }
}

还有一个插件看起来也不错

element的多选

// 为什么要写这个呢，因为官方给的代码演示都是单标签
<el-checkbox-group v-model="">
     <el-checkbox :label="" />
</el-checkbox-group>
// 后面才知道这个单标签是可以写成双标签中间加名字的
<el-checkbox-group v-model="">
     <el-checkbox :label="">{{name}}</el-checkbox>
</el-checkbox-group>

element的form按回车导致页面刷新
官方文档有提示，当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent，也可以自己添加一个隐藏的输入框避免回车键刷新页面

代码高亮
上面的markdown是一个编辑器，编辑后的代码需要在另一个页面展示成翻译版，我选择的插件是vue-markdown + highlight

// main.js 引入高亮的样式
// 这个样式可以自己写，也可以百度找
// 获取去到node_modules/_highlight.js@9.16.2@highlight.js/style文件夹里
// 随便找个样式复制出来放到自己的静态文件夹里就行
import "@/styles/hljs.css";

//  view.vue
<vue-markdown :source="value" @rendered="rendered"></vue-markdown>
// 引入插件
import VueMarkdown from 'vue-markdown'
let hljs = require('highlight.js');
// 声明组件
components: {
   // 不支持main.js全局使用
   VueMarkdown
},
// methods方法
rendered(str){
   // 这个是渲染完毕后的回调，在这里把dom渲染成高亮
   if(str){
      setTimeout(()=>{
         var t =document.querySelectorAll("pre code");
         Array.prototype.forEach.call(t,hljs.highlightBlock)
       },0)
    }
}

这个方法是之前使用vue-hljs插件的时候看到的，这个插件就是把上面的计时器里的代码封装成一个vue指令，缺点就是当数据请求太慢，指令只使用一次，导致数据更新后指令也不重新渲染出高亮，然后我就看了插件的源码后，把vue-hljs插件删了，把指令里的代码写到了编辑器渲染之后