vue模块
最后发布时间 : 2024-12-07 19:05:48
浏览量 :
参考
- https://cn.vuejs.org/guide/quick-start.html
- https://github.com/bioproj/web
- https://juejin.cn/post/7237240999243694117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拆分模块</title>
</head>
<body>
<pre>
curl https://unpkg.com/vue@3/dist/vue.global.js -O vue.global.js
</pre>
<script src="vue.global.js"></script>
<div id="app"></div>
<script type="module">
const { createApp, ref } = Vue
import MyComponent from './my-component.js'
createApp(MyComponent).mount('#app')
</script>
</body>
</html>
// my-component.js
const { createApp, ref } = Vue
export default {
setup() {
const count = ref(0)
return { count }
},
template: `<div>Count is: {{ count }}</div>`
}
Web Components 组件
- https://cli.vuejs.org/zh/guide/build-targets.html#web-components-%E7%BB%84%E4%BB%B6
https://github.com/halo-dev/halo-comment-normal
<#macro comment target,type>
<#if !post.disallowComment!false>
<script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/npm/halo-comment-normal@1.1.1/dist/halo-comment.min.js'}"></script>
<script>
var configs = {
autoLoad: true,
showUserAgent: true
}
</script>
<halo-comment id="${target.id?c}" type="${type}" :configs="configs"/>
</#if>
</#macro>