让Vue原生支持在浏览器中直接运行.vue组件文件

中文
, ,
#1

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

所以，想搞Vue开发却必须依赖Webpack这个复杂的框架，我认为这不合理。Vue应该自成一套体系才好，因为学习都是有成本的，而且我认为Webpack的学习成本远远大于Vue！！！

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

在Vue3时代，FranckFreiburger又开发了vue3-sfc-loader
插件，可以使浏览器直接运行Vue3的.vue文件。

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

所以，让Vue原生支持在浏览器中直接运行.vue文件，这才符合“渐进式框架”的定位！！！大家有能力把Webpack学好就用它，学不好或者不想学或者嫌麻烦，就可以用Vue自带的能力使浏览器直接运行.vue文件！！！

请大家支持这个想法！！

#2

通过使用浏览器缓存功能或者本地存储功能将.vue文件编译后的结果保存在本地，我想运行效率也不会差吧

#3

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

#4

恐怕不行。Vue SFC 不是简单的三合一，它还支持很多扩展功能，比如方言支持、限定样式等，有些并不是那么容易或适合在浏览器上运行的。官方提供此种支持，很可能意味着 Vue SFC 规范在不同环境中的实现割裂，这不是一件好事。

你觉得 Webpack 不好用很可能是 Webpack 自己的问题。那么，试试换一个工具？Parcel、Vite 对 Vue SFC 的支持都是非常完善的。

以及，Webpack（包括其他同类工具）的工作原理其实并不复杂……我觉得 Webpack 官方文档 Concepts 部分已经说得很明白了。退一步讲，理解 Webpack 的工作原理并不是理解其工作机制的前提，大可不必纠结于此。

#5

你是知乎的那位吗？
还是没做直接解析.vue的。
而是采用了折中的方法。
手动把.vue 文件拆分成 .html 文件 + .js 文件 的形式。
然后用axios 加载 html文件，在用import 加载js文件，然后合并成动态组件支持的形式，最后注册组件。


const myImport = (url) => {
  return new Promise((resolve, reject) => {
    const ver = window.__ver || ''
    Promise.all([
      axios.get(url + '.html' + ver),
      import(url + '.js' + ver)
    ]).then((req) => {
      resolve({
        template: req[0].data,
        props: req[1].default.props,
        setup: req[1].default.setup
      })
    })
  })
}

export default myImport

封装了一个函数，可以像动态路由那样使用。

在线演示
https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/

在线演示还有点小问题，加载的路径调整有点麻烦。

#7

是的。 :grinning: 您是？

#8

官方可以提供扩展。默认支持html、js、css。如果需要更高级的特性，如jade、ts、less等，官方可以提供api去支持。Vue直接解析运行.vue文件小项目和测试环境中非常实用。

#9

你想错了方向。在网络开销和浏览器性能依然是主流指标的当下，这些功能不是不能做，而是不值得。如果要说开发 API 给社区自行实现，其实现在已经有了（不然 http-vue-loader 是怎么做到的）。快速跑小项目，欢迎使用 Vite。

#10

https://naturefwvue.github.io/nf-vue-cnd/cnd/project-template/
又整理了一下，不知道你有没有看看。

#11

简单来说 单文件组件 其实就是讲组件的 结构 样式 行为 用三个标签组装起来了。并且这三样可能会需要使用到预编译器。如果是不考虑到兼容性的情况下，我有一个 electron 的项目，没有使用 webpack 很捡漏不过可以给你参考下我的处理思路
FETools项目地址
处理文件

思路：

  1. 不在单文件组件里面写样式，样式通过 编辑器的插件或者 gulp 或者命令行工具来处理，并编译成css 文件
  2. 单文件组件中只写逻辑和结构，通过nodejs 监听文件变更，变更后，将template 标签里面的html代码转化成字符创， 放到 script 标签里面 的 template 代码中，并将script 里面的代码单独转化成一个 ESModule 规范的文件
  3. 入口文件通过 ESModule 的方式来加载入口的 index.js，在 index.js 中 通过 import xxx from './xxx' 来引入其他的组件或者模块

以上，因为我这个是提供给 Electron 用，不需要考虑兼容性，所以代码很简单并且很多地方未完善。不过应该是你想要的思路。

#12

vite 工具也不错。