项目背景

我非常非常讨厌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

# javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云致力推进全域Serverless时代，引领技术创新，赋能行业实践

avatar 华为云开发者联盟
cover

基于Serverless服务构建千万车辆数据实时处理的车联网业务

avatar 华为云开发者联盟
cover

O3使能伙伴服务作业平台维护作业专题

avatar 华为云开发者联盟