我希望有一个页面包含一些vue组件（比如一个TODO列表）和一个View-Source / live-demo切换，用户可以激活它以在工作组件及其源代码之间切换。
现在，有什么方法可以在我的应用程序中获取.vue文件的原始代码吗？
像：
import Todo from './components/Todo.vue'
//use Todo as a component, no problema
var todocode = getRawCode('./components/Todo.vue'); //how do I do this?
我正在使用webpack作为我的捆绑包，我有一个想法是，我可以require('./components/Todo.vue', someNinjaOptionsHereMaybe)以某种方式覆盖vue-loader（我webpack.config.js .vue默认配置file-loader在应用程序中使用<template>
<Todo>
</template>
<script>
import Todo from '../Todo.vue'
export default {
name: 'TodoDocs',
components: {Todo}
}
</script>
“只有这一次”的文件） - 但我不知道这是否真的可能。
思想？
更新
根据@Saurabh的要求，我会尝试解释我是如何使用它的。
This就是我所说的“组件目录”（单击“仪表板”展开并查看两个可用组件：IssuesDocs和TodoDocs）
请注意docs application动态找到这两个组件 - 如果我创建了与src / ** / * Docs.vue匹配的任何文件，它将被添加到左侧的组件列表中，它将是当用户点击它时右侧可用。
在右边的视图中，我想要一个带有两个选项的标签视图：“查看”和“代码”。
“View”将显示工作组件（就像它现在一样），“Code”将显示代码，例如，在“TodoDocs”的情况下，代码将显示TodoDocs的内容。 vue文件，如下：
<Todo>这是关于如何使用Todo组件的“可执行文档”（在这种情况下，就像导入和添加timeupdate标签一样简单。）
我发现当你在同一个应用程序中工作的大中型团队时，拥有这样的组件目录非常有用。我已经使用AngularJs成功实现了这个概念，现在我正在尝试用vuejs做同样的事情。
答案 0 :(得分：7)
在令人难以置信的事态发展中，我实际上找到了解决方案。
事实证明我可以require(!!my-loader!my-module)我发现这个raw-loader可以满足我的需求。
因此，对我的代码进行this change实际上允许我加载.vue组件，然后再次使用raw-loader加载它以获取其来源。
它有效，令人难以置信。
工作结果为live