项目背景
我非常非常讨厌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