Webpack 在应用程序中显示vue组件的源

我希望有一个包含一些vue组件（比如，TODO列表）和视图源代码/实时演示切换的页面，用户可以激活该页面，在工作组件和源代码之间切换

现在，有没有办法在我的应用程序中获取.vue文件的原始代码

比如：

我正在使用webpack作为捆绑包，我的一个想法是，也许我可以

要求（'./components/Todo.vue'，这里可能有一些ninjaoptions）

以某种方式覆盖

vue加载程序

（默认情况下在

webpack.config.js中为
.vue
文件配置）和
文件加载程序
“仅此一次”在应用程序中-但我不知道这是否真的可能

想法


更新

根据@Saurabh的请求，我将尝试解释我到底想如何使用这个

我称之为“组件目录”（单击“仪表板”展开并查看两个可用组件：IssuesDocs和TodoDocs）

请注意，系统会动态地找到这两个组件—如果我创建了与src/***Docs.vue匹配的任何文件，它将添加到左侧的组件列表中，并且当用户单击它时，它将在右侧可用

在右边的视图中，我希望有一个带有两个选项的选项卡视图：“视图”和“代码”

“视图”将显示工作组件（就像现在一样），“代码”将显示代码，例如，在“TodoDocs”的情况下，代码将显示TodoDocs.vue文件的内容，如下所示：

<template>
  <Todo>
</template>

<script>

import Todo from '../Todo.vue'

export default {
  name: 'TodoDocs',
  components: {Todo}
}
</script>


从“../Todo.vue”导入Todo
导出默认值{
名称：“TodoDocs”，
组件：{Todo}
}

这是如何使用Todo组件的“可执行文档”（在本例中，它与导入和添加
标记一样简单）

我发现，当您在一个中大型团队中处理同一个应用程序时，拥有这样的组件目录非常有用。我已经使用AngularJs成功地实现了这个概念，现在我正尝试用vuejs做同样的事情。
在令人难以置信的情况下，我实际上找到了一个解决方案

事实证明我可以
要求（！！我的加载器！我的模块）
，我发现这正是我想要的

因此，修改代码实际上允许我加载.vue组件，然后使用原始加载程序再次加载它以获取其源代码

真是不可思议

工作结果很有意思，你能详细说明一下你想通过获取原始代码来实现什么吗？浏览器通过源映射文件来实现，可能有解决方案。@TonyL–mpada你是否在寻找一种方法，在应用程序运行时获取Vue文件的未绑定、未处理的代码，即源代码？我需要未绑定的，未经处理的代码在运行时可用，但理想的情况是在构建时获得它，我想我刚才在webpack的文档[1]中读到了我需要的（“我的加载器！”/我的很棒的模块”）；我发现原始加载程序[2]需要将文件转换为字符串。我仍然不能把东西放在一起（当我需要（'raw-loader！…TodoDocs.vue'）时，我被卡住了，得到了一个带有“已编译”js代码的字符串，而不是vue代码）我在raw-loader repo上打开了一个问题（=问题），看看他们是否能帮上忙：P[1][2]
<template>
  <Todo>
</template>

<script>

import Todo from '../Todo.vue'

export default {
  name: 'TodoDocs',
  components: {Todo}
}
</script>