首页 >web前端 >前端问答 > 正文

vue文件怎么在浏览器运行

原创2021-09-29 16:57:4301143

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中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue文件 运行
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php怎么分割数组为几部分657
    php怎么删除指定下标的数组值824
    php怎么获取当前方法的参数值729
    推荐视频教程
  • vue.js 英文版vue.js 英文版
  • Vue.js基础教程(官方手册)Vue.js基础教程(官方手册)
  • Vue.js 开发基础教程Vue.js 开发基础教程
  • vue 3.0全新实战课程(2021版)第一季vue 3.0全新实战课程(2021版)第一季
  • 视频教程分类