浏览器html页面中如何使用和引入.vue文件组件

发布时间:2023年03月21日 浏览数量:410

<script src="/vue/vue.js"></script>
<script src="/vue/loader.js"></script>
<div id="app" v-cloak><xg-main ref="main" v-if="options" :options="options" :pagename="pagename"></xg-main></div>
<script type="module">
const {createApp}=Vue;
const {loadModule}=window['vue3-sfc-loader'];
function loader(){
	return {
		moduleCache:{vue:Vue},
		async getFile(url){
			const res=await fetch(url);
			if (!res.ok)throw Object.assign(new Error(res.statusText+''+url),{res});
			return {
				getContentData:asBinary=>asBinary?res.arrayBuffer():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 app=createApp({
	components:{
		'xg-main':Vue.defineAsyncComponent(()=>loadModule('../components/xg-main.vue',loader()))
	},
	data(){
		return {
			options:null,
			pagename:pagename
		}
	},
	methods:{
		init:function(o){
			var s=this;
			s.options=o;
			if(s.options)s.pagename=s.options.pagename;
		},
	},
	mounted(){
		var s=this;
		s.init();
	}
});
app.mount('#app');
</script>


vue.js下载地址:http://e.xg3.cn/static/vue/vue.js

loader.js下载地址:http://e.xg3.cn/static/vue/loader.js