如何查看Vue单文件组件生成的源代码？

可以使用vue-loader或vueify的sfc-loader插件来编译vue单文件组件，并将其转换为JavaScript模块。然后，您可以使用常规文件浏览器或代码编辑器来查看转换后的JavaScript代码。

以vueify为例，可以通过在命令行中运行以下命令来安装vueify和sfc-loader插件：

npm install vueify sfc-loader

接下来，在你的vue单文件组件中导入vueify，并使用它来编译组件。例如，以下代码演示了如何编译名为App.vue的组件，并输出它的JavaScript源代码。

const vueify = require('vueify')
const sfc = require('sfc-loader')

const component = sfc.parse(vueify.compile('<template><div>Hello World!</div></template><script>export default {name: "App"}</script><style>* {color: red;}</style>').descriptor)

console.log(component.script.content)

运行以上代码，输出的内容将是：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {
  name: "App"
};