Vue2+Vuecli+component

工作中遇到了一个问题，需要对接口返回的数据进行处理。

接口返回的：
你好你好，你好

实际需要的:
你好你好，你好

思考后，想到了一种方式，借助component，将img替换为自己封装的ImgMsg组件（包含了占位图、算出最佳合适显示比例、预览功能等功能）。

具体实现需要进行如下步骤：

1. 配置项

// vue.config.js
module.exports = {
  ...
  /* 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false) */
  runtimeCompiler: true,
}

2. 全局注册

// components/Common/index.js
import Vue from 'vue'
imoort ImgMsg from '@/components/ImgMsg'

const components = [ImgMsg];

components.forEach(component => {
  Vue.component(component.name, component);
});

3. 组件中使用

附：
ImgMsg组件代码