vue文件在浏览器运行的方法：1、打开cmd命令窗口，使用cd命令进入包含vue文件的vue项目目录中；2、在项目目录中，运行命令“npm run dev”启动项目；3、在浏览器地址栏输入“localhost:8080”即可。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
vue文件在浏览器运行
新建vue文件
官方示例如下，你需要创建 index.html 文件：
立即学习“前端免费学习笔记（深入）”；
<html><body>
<p id="app"></p>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
<script>
const options = {
moduleCache: {
vue: Vue },
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(url+' '+res.statusText), { res });
return await 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 { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
},
template: '<my-component></my-component>'
});
app.mount('#app');
</script></body></html>然后你需要创建 myComponent.vue 文件，文件内容如下：
<template>
<p class="title">
hello world
</p>
</template>
<script>
export default {
setup () {
console.log('hello world')
}
}
</script>
<style scoped>
.title {
font-size: 40px;
color: red;
}
</style>启动项目
在cmd中，使用cd命令进入vue项目
在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
在浏览器输入localhost:8080即可。
相关推荐：《vue.js教程》
以上就是vue文件怎么在浏览器运行的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
270
