项目背景
我非常非常讨厌Webpack，这个东西结构复杂，概念繁多，难以理解，主体与插件设计并不一致，我曾尝试学习，但官方只是教你怎么用，不解释配置底层原理，我不喜欢这种只知表面不知原理的感觉。或者设计者和众多开发者自己也不是完全清楚到底怎么解释原理吧！！！
首先说，Vue自创的单文件组件这个太好用了，封着性好，开发组件没什么学习成本，好用！
但是，Vue虽然号称“渐进式框架”，但如果【不想】只使用基本语法做点小玩意，【想】使用组件搞Vue开发，却必须依赖Webpack这个复杂的工具，这非常不符合“渐进式框架”的设计理念，因为要想把Webpack这个东西用好，那么学习成本并不比Vue低多少。Vue应该自成一套体系才好。
在Vue2时代，为了能够快速开发，我使用了FranckFreiburger开发的http-vue-loader插件，它可以使用浏览器直接运行.vue文件，方便完善代码，实现快速开发；
https://github.com/FranckFreiburger/http-vue-loader
在Vue3时代，FranckFreiburger又开发了vue3-sfc-loader插件，可以使浏览器直接运行Vue3的.vue文件。
https://github.com/FranckFreiburger/vue3-sfc-loader
我非常喜欢FranckFreiburger的这两个项目，而且已经在实际项目中使用了，特别好用！！！唯一一点是不太方便调试。
所以，让Vue原生支持在浏览器中直接运行.vue文件，这才符合“渐进式框架”的定位！！！大家有能力把Webpack学好就用它，学不好或者不想学或者嫌麻烦，就可以用Vue自带的能力在浏览器中直接编译运行.vue文件！！！这样项目开发起来就不用去配置繁琐的Webpack，不用等待Webpack的编译过程。如果想提高运行.vue的运行效率，可以使用浏览器的本地存储等手段提高运行效率，这应该是个很切合实际的需求吧
快速开始
官方示例如下，你需要创建 index.html 文件：
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
<script>
const options = {
moduleCache: {
vue: Vue
},
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(url+' '+res.statusText), { res });
return await res.text();
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
},
template: '<my-component></my-component>'
});
app.mount('#app');
</script>
</body>
</html>然后你需要创建 myComponent.vue 文件，文件内容如下：
<template>
<div class="title">
hello world
</div>
</template>
<script>
export default {
setup () {
console.log('hello world')
}
}
</script>
<style scoped>
.title {
font-size: 40px;
color: red;
}
</style>最后启动项目：
npm install express
node -e "require('express')().use(require('express').static(__dirname, {index:'index.html'})).listen(8181)"访问地址：http://127.0.0.1:8181
