虽然不用构建或打包，但本框架仍然可以体验到Vue单文件组件以及模块化开发，这无疑是其他库做不到的。

根据Vue文档，Vue的Browser版本的组件为一个js模块，而template部分是模块导出的一个字符串，这在我们开发时极为不便，如下：component.js

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
  // 也可以针对一个 DOM 内联模板：
  // template: '#my-template-element'
}

如果template的篇幅很大，这样开发极其不好，所以，针对此，我做出了一定优化，分离了component中的template一个单独的HTML文件。

如：Home.js Home.html 他们在同一目录下

此时，我们便可以用一个请求请求到Home.html中的内容(字符串)，并赋值给template，如下写法：

import { ref } from 'vue'
import { getTemplate } from 'tao';

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: await getTemplate('/views/Home')
}

本框架就是在做这样的事，所以我们自然有相应的函数和模块来解决。如果你不了解，可以返回简介，查看项目目录结构。

现在我们解决了组建的界面(html)和脚本(js)，那如何解决样式(css)呢，当然，不必担心，本框架采用css原子化来解决大部分的样式问题，Tailwindcss的插件Daisyui还可以解决UI组件，如果碰到了实在无法解决的问题，我们的第二方案就是使用原生的scope，简介中的目录结构，如下所示

@scope (.ComponentName) {
  :scope {
    background-color: plum;
  }

  a {
    color: darkmagenta;
  }
}

这样我们就能实现vue的<style scoped>的效果，使之不干扰其他组件