vue2项目使用vue serve运行单个组件页面时的白屏问题

当我们在vue2的项目中开发组件时，经常想单独预览，我们可以使用vue serve,在使用之前需要安装一个插件

npm install -g @vue/cli-service-global

使用方法为vue serve + 组件的路径（/src..../xxx.vue），但是有时候我们会发现运行出来的页面是空白的，我们可以在浏览器调试工具中可以看到，组件实例并没有被挂载。

如果我们的项目是vue/cli创建的vue2项目会有两种情况：

1. vue/cli 4.x版本创建的项目，不会出现空白页面的情况，vue/cli 4.x会帮我们自动挂载
2. vue/cli5.x以后的版本，都不支持自动挂载

如果我们想使用vue serve单独预览我们开发的组件，需要手动挂载组件实例，如果是vue2项目可以使用vue/cli4.x的版本（vue4.x的最后一个版本为4.5.19）

如果不想回退，可以在预览组件的.vue文件中加一段自动挂载代码：

1. 新建 src/serve-entry.js

JavaScript

import Vue from 'vue'
import Comp from './YourComponent.vue'

new Vue({
  render: h => h(Comp)
}).$mount('#app')

2. 运行

vue serve src/serve-entry.js

如果是vue2项目的话建议还是使用vue/cli4.5.19的版本，这样会方便很多。