使用Vue单文件组件的奇葩姿势--抛弃繁杂的Webpack，抛弃Vite，抛弃各种打包工具，让浏览器直接加载Vue单文件组件

在这些奇葩姿势里，都没有使用Webpack，没有使用Vite，就是编写完.vue格式的组件后直接交给浏览器使用，方便快捷。

首先看一下Vue官方规定的单文件组件的编写格式：

<template>
    <div>{
  {msg}}</div>
</template>
<script>
    export default {
        data() {},
        setup() {},
        methods: {}
    };
</script>
<style scoped>

</style>

Vue可以直接加载以对象形式编写的组件，即Vue.createApp().component()、Vue.defineComponent()、Vue.definAsyncComponent()这三个方法：

const MyComponent = {
    tempalte: `<div>{
  {msg}}</div>`,
    data() {},
    setup() {},
    methods: {}
};

利用这两点可以产生姿势一和姿势二。

 

姿势一：后端解析.vue文件后发送到前端

基本原理是Vue直接支持使用如下格式定义组件，这种格式可以直接被Vue解析，所以将以上.vue组件转换成下述形式即可。注意：1.在<script>的export的对象中，必须有一个名为template、值为#template#的占位符，在data对象中必须有一个名为style、值为#style#的值。这两个要求都是为了替换方便。2.对于<style>的处理，是将所有的规则添加组件名限定符后作为一个标签插入到<template>中，以实现scoped限制。

//对.vue格式的要求
<template>
    <div>
        {
  {msg}}
    </div>
</template>
<script>
    export default {
        template: '#template#'  // 用于将模板替换到这里
        data() {
            style: '#style#'    // 用于将样式替换到这里
        },
        setup() {},
        methods: {}
    };
</script>
<style scoped>

</style>

直接贴一下代码：

//app.js
const path = require('path');

const Koa = require('Koa');
const koaStatic = require('koa-static');

const componentRouter = require('./router/componentRouter');

const app = new Koa();

app.use(componentRouter.routes());
app.use(componentRouter.routes());
app.use(componentRouter.allowedMethods());

app.use(koaStatic(path.join(__dirname, '../clientSide/static')));
app.use(koaStatic(path.join(__dirname, '../clientSide/components')));

app.listen(80);