+
95
-

如何让vue文件直接可以在浏览器运行?

vue的写法在浏览器与cli中有不同,请问cli里的vue文件如何可以直接在浏览运行?

例如这个vue文件如何在浏览器直接运行

<template>
	<view class="content">
		
		<view>
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>


网友回复

+
15
-

可以用vue-html-loader,也可以用vue2-sfc-loader,下面我们以vue2-sfc-loader来示例怎么写一个在浏览器直接运行vue文件的方法代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue2-sfc-loader.js"></script>
    <script type="module">

        /* <!-- */
        const mainComponent = `
        <template>
        <span @click="sayhi">{{title}} from Vue {{ require('myData').vueVersion }} !</span>
        </template>
        <script>
        export...

点击查看剩余70%

+
15
-

这个是在线vue文件直接解析预览html

https://tool.bfw.wiki/tool/1621643457815276.html

我知道答案,我要回答