这篇文章主要介绍vue文件如何在浏览器运行，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
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文件如何在浏览器运行”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
