单文件组件
约 446 字大约 1 分钟
2025-01-05
虽然不用构建或打包,但本框架仍然可以体验到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>的效果,使之不干扰其他组件
