给Vue官方建议：完善Vue自带编译器，提供解释.vue文件功能，让浏览器可直接加载执行.vue文件

请看：评论比文章精彩系列(●—●)

我写的废话太多了，现在两句话总结：

.vue文件是Vue发明的，这是编写组件的官方方式，Vue理应支持解析运行自己发明的文件格式，而不是去依赖一个第三方工具，这应该是个很合理的需求。官方应该完善自己的编译器，原编译器一开始就支持解析字符串模板写成的组件，提供解析.vue文件的基本功能并不难。如果各位大神不满意官方提供的功能，想要更高的性能，可以去追求各种三方工具。

~~~~~~以下是前期内容：~~~~~~~~

这个应该是容易实现的，因Vue自带编译器，Vue官方可否完善此编译器，使其直接支持.vue文件的解释运行？

下面这篇文章分析了webpack为何难用：

我非常非常讨厌Webpack，这个东西结构复杂，概念繁多，难以理解，主体与插件设计并不一致，我曾尝试学习，也用它开发过小项目，但官方只是教你怎么用，不解释配置底层原理，我不喜欢这种只知表面不知原理的感觉。或者设计者和众多开发者自己也不是完全清楚到底怎么解释原理吧！！！

下面说说Vue的单文件组件：

首先说，Vue自创的单文件组件这个太好用了，封着性好，开发组件没什么学习成本，好用！

但是，Vue虽然号称“渐进式框架”，但如果【不想】只使用基本语法做点小玩意，【想】使用组件搞Vue开发，却必须依赖Webpack这个复杂的工具，这非常不符合“渐进式框架”的设计理念，因为要想把Webpack这个东西用好，那么它的学习成本并不比Vue低多少。Vue应该自成一套体系才好。

举一个例子，若sun 公司发明了字节码格式，但不提供虚拟机，要求开发者使用其它工具编译成机器码运行，这合理么？同理，Vue提出了自己的组件开发格式，但不提供解释运行功能，合理么？

在Vue2时代，为了能够快速开发，我使用了FranckFreiburger开发的http-vue-loader插件，它可以使浏览器直接运行.vue文件，方便完善代码，实现快速开发，目前已经1.2k个star；

https://github.com/FranckFreiburger/http-vue-loader

在Vue3时代，FranckFreiburger又开发了vue3-sfc-loader插件，可以使浏览器直接运行Vue3的.vue文件。上线3个月，已有60个star。

https://github.com/FranckFreiburger/vue3-sfc-loader

我非常喜欢FranckFreiburger的这两个项目，而且已经在实际项目中使用了，特别好用！！！唯一一点是不太方便调试。

这两个版本的插件得到star很多，足以说明这个需求得到大人数人赞同。

所以，让Vue原生支持在浏览器中直接运行.vue文件，这才符合“渐进式框架”的定位！！！大家有能力把Webpack学好就用它，学不好或者不想学或者嫌麻烦或者项目根本用不着打包，就可以用Vue自带的能力在浏览器中直接编译运行.vue文件！！！其实，在完整版的Vue中本身就带有编译器，用来将模板字符串编译成为 JavaScript 渲染函数的代码。这样项目开发起来就不用去配置繁琐的Webpack，不用等待Webpack的编译过程。如果想提高运行.vue的运行效率，可以使用浏览器的本地存储等手段提高运行效率，这应该是个很切合实际的需求吧

请大家支持这个想法。

有同学说Vite的，简单看了下，感觉要是想用好这个工具，仍然需要学习成本。Vue在加载.vue组件文件后直接解析运行，不是更简单么？

下面贴一个我自己实现的后端代码，分析.vue文件，将其中的内容转换为字符串模板组件，发送到浏览器后浏览器可以直接执行，支持style的scoped，它【不需要Webpack】，浏览器请求.vue组件文件，浏览器中Vue直接编译执行。

实现思路是：1.解析.vue文件中的template、script、style部分；2.提取script内容；3.将style中的内容插入到template中的新创建的style标签中；4.将template内容插入到script中的tempate属性中；5.将js返回浏览器，可使用defineAsyncComponent()方法接收直接执行；