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

Question

我想有一个页面包含一些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.jsfor .vue文件中默认配置)file-loader在应用程序中使用"只需一次" - 但我不知道如果那样实际上是可能的.

思考？

---

UPDATE

根据@Saurabh的要求,我将尝试解释我是如何使用它的.

这就是我所说的"组件目录"(单击"仪表板"以展开并查看两个可用组件:IssuesDocs和TodoDocs)

请注意,docs应用程序动态地找到了这两个组件 - 如果我创建了与src/**/*Docs.vue匹配的任何文件,它将被添加到左侧的组件列表中,并且当它在右侧时可用用户点击它.

在右边的视图中,我想要一个带有两个选项的标签视图:"查看"和"代码".

"View"将显示工作组件(就像它现在一样),"Code"将显示代码,例如,在"TodoDocs"的情况下,代码将显示TodoDocs.vue文件的内容,像这样:

<template>
  <Todo>
</template>

<script>

import Todo from '../Todo.vue'

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

这作为如何使用Todo组件的"可执行文档"(在这种情况下,就像导入和添加<Todo>标签一样简单).

我发现当你在同一个应用程序中工作的大中型团队时,拥有这样的组件目录非常有用.我已经使用AngularJs成功实现了这个概念,现在我正在尝试用vuejs做同样的事情.

Answer 1

在令人难以置信的事态发展中,我实际上找到了解决方案.

事实证明我可以require(!!my-loader!my-module),我发现这个原始装载机可以满足我的需求.

因此,对我的代码进行此更改实际上允许我加载.vue组件,然后使用raw-loader再次加载它以获取其源代码.

它的工作原理令人难以置信.

工作结果是现场