vue文件运行的方法教学

 更新时间:2019年02月12日 11:24:52   投稿:laozhang  
在本篇文章里小编给大家分享了关于vue文件运行的方法教学内容,有需要的朋友们跟着学习下。

vue文件怎么运行呢?下面就跟小编一起来看一看吧。

1、首先,列出来我们需要的东西:  

  • node.js环境(npm包管理器)
  • vue-cli 脚手架构建工具
  • cnpm  npm的TB镜像

2、如果你是用vue-cli webpack builid之后,

放到web服务器,访问index.html就可以运行了。

3、常见的web服务器有tomcat,nginx等。

推荐使用nginx。

4、在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

5、这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

 项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。

相关文章

  • Vue router配置与使用分析讲解

    Vue router配置与使用分析讲解

    第一次写Vue项目,要用到router.js,看了一下官方文档,还是很懵逼,不知道怎么配置,又去看视频查资料,最后终于搞定了。话不多说,先上代码,我再讲一些要注意的细节
    2022-12-12
  • vue3中如何使用iframe嵌入vue2页面

    vue3中如何使用iframe嵌入vue2页面

    这篇文章主要介绍了vue3中如何使用iframe嵌入vue2页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue中v-for的9种使用案例总结大全

    Vue中v-for的9种使用案例总结大全

    v-for是vue的循环指令,作用是遍历数组(对象)的每一个值,这篇文章主要给大家介绍了关于Vue中v-for的9种使用案例的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue中使用swiper轮播图的正确姿势(亲测有效)

    vue中使用swiper轮播图的正确姿势(亲测有效)

    最近在用Vue制作移动端项目,碰到了轮播图的制作,接下来就让小编一步一步带大家动作制作吧,下面这篇文章主要给大家介绍了关于vue中使用swiper轮播图的正确姿势,需要的朋友可以参考下
    2022-06-06
  • vue-router的beforeRouteUpdate不触发问题

    vue-router的beforeRouteUpdate不触发问题

    这篇文章主要介绍了vue-router的beforeRouteUpdate不触发问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • antd vue 如何调整checkbox默认样式

    antd vue 如何调整checkbox默认样式

    这篇文章主要介绍了antd vue 如何调整checkbox默认样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vuejs第十三篇之组件——杂项

    Vuejs第十三篇之组件——杂项

    组件(Component)是 Vue.js 最强大的功能之一。本文重点给大家介绍vuejs组件相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • vue中this.$set()的基本用法实例

    vue中this.$set()的基本用法实例

    最近工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set(),下面这篇文章主要给大家介绍了关于vue中this.$set()的基本用法实例,需要的朋友可以参考下
    2023-01-01
  • Vue实战之掌握自定义指令

    Vue实战之掌握自定义指令

    作为使用Vue的开发者,我们对Vue指令一定不陌生,诸如v-model、v-on、v-for、v-if等,同时Vue也为开发者提供了自定义指令的api,熟练的使用自定义指令可以极大的提高了我们编写代码的效率,让我们可以节省时间开心的摸鱼
    2022-11-11
  • 解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题

    解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题

    这篇文章主要为大家介绍了解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论