vue文件在浏览器运行的方法：1、打开cmd命令窗口，使用cd命令进入包含vue文件的vue项目目录中；2、在项目目录中，运行命令“npm run dev”启动项目；3、在浏览器地址栏输入“localhost:8080”即可。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
vue文件在浏览器运行
新建vue文件
官方示例如下，你需要创建 index.html 文件：
立即学习“前端免费学习笔记（深入）”；
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: '' }); app.mount('#app');
登录后复制
然后你需要创建 myComponent.vue 文件，文件内容如下：
hello world
export default { setup () { console.log('hello world') }} .title { font-size: 40px; color: red; }
登录后复制
启动项目
在cmd中，使用cd命令进入vue项目
在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
在浏览器输入localhost:8080即可。
相关推荐：《vue.js教程》
以上就是vue文件怎么在浏览器运行的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2946568.html
