当前位置:首页 > 软件开放 > 正文内容

vue项目怎么运行起来eclipse(eclipse vuejs)

软件开放2年前 (2023-04-10)1923

今天给各位分享vue项目怎么运行起来eclipse的知识,其中也会对eclipse vuejs进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

vue cli3项目打包部署到tomcat服务器运行

步骤:

一、找到文件vue.config.js,没有则自己创建一个

二、编写vue.config.js的内容

三、修改路由方式,修改为hash,文件位置自己找,vuecli3中在router.ts文件中

四、添加空路由

找到编译好的文件夹,如果作为独立项目,直接拷贝后放到Tomcat里即可,如果是放到另外一个项目中使用,则拷贝到其它项目中去

七、适配到EOS中使用

7.1、改变原EOS项目中的首页配置

在webapps\default\WEB-INF\web.xml中配置

7.2、修改原EOS项目中的登录成功的跳转页,也是项目主页

在webapps\default\coframe\auth\index.jsp中配置

Vue项目启动加载逻辑介绍

下面说下Vue项目启动的加载逻辑:

首先前端项目默认入口都是index.html

这里有个DIV的id为app,这里是vue的挂载点,后续views中的 .vue文件都会挂载在这里。

程序运行index.html后会寻找用到app的文件,即main.js

这里创建了一个vue实例,挂载了#app,也就是index.html中的id为app的div元素,接着加载App.vue中的页面

打开App.vue文件,查看配置有router-link和router-view

router-link 定义点击后导航到哪个路径下

router-view 会动态的把对应的组件内容渲染到router-view中

上面router-view中加载的内容有路由决定,于是再到路由文件查看此路由定义

路由配置文件中如图所示两种方式都可以实现。

接下来加载的就是具体的功能模块了

例如在Home.vue这个模块中又引入了HelloWorld.vue公共组件模块

关联了该组件,也会加载进去

项目运行起来后,会先去找入口文件index.html,在index.html中找到其实例需要挂载的位置,然后找到main.js中实例创建的地方,去加载组件中的模板,然后通过模板中的router-view,得知需要去查找路由,找到后加载对应的模板,如果模板中引用了公共的模板再加载公共模板进来,最后把处理后的这些呈现到浏览器中。

eclipse安装vue插件失败

解决方案:

1、检查eclipse版本是否支持vue插件,如果不支持,就需要升级eclipse版本;

2、检查eclipse的Marketplace是否可以正常访问,如果访问不了,就需要更换网络环境;

3、检查vue插件是否正确安装,如果不正确,就需要重新安装;

4、检查vue插件是否与eclipse版本兼容,如果不兼容,就需要升级vue插件;

5、检查eclipse的内存是否足够,如果不够,就需要扩大内存;

6、检查eclipse的系统是否安装了最新的Java版本,如果没有,就需要安装最新的Java版本;

7、检查eclipse的配置文件是否正确,如果不正确,就需要重新配置;

8、检查vue插件的安装包是否损坏,如果损坏,就需要重新下载安装包;

9、检查系统是否存在病毒,如果存在,就需要使用杀毒软件进行清除。

在 VS Code 中调试vue项目

1.VS Code 中安装Debugger for Chrome扩展的最新版本:

2.在config/development.config.js(官网描述的是config/index.js,所以需要根据具体的项目而定)中添加如下配置:

3.点击运行调试按钮,再点击设置按钮,修改launch.json文件,配置如下:

4.在vue项目的文件中设置断点

5.启动vue项目:

6.点击运行调试按钮,再点击运行小图标,这时会弹出新的chrome浏览器页面。

7.在弹出的浏览器窗口的页面进行操作,触发断点时会跳转掉vscode的断点处。

遇到的问题:

官网中的launch.json配置中"url": " ",url的端口是8080,这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考:

在 VS Code 中调试:

vue项目怎么运行起来eclipse的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于eclipse vuejs、vue项目怎么运行起来eclipse的信息别忘了在本站进行查找喔。

阅读剩余的51%

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://chlfg.com/post/16110.html

“vue项目怎么运行起来eclipse(eclipse vuejs)” 的相关文章

软件开发项目管理流程(软件开发过程与项目管理)

软件开发项目管理流程(软件开发过程与项目管理)

本篇文章给大家谈谈软件开发项目管理流程,以及软件开发过程与项目管理对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、企业软件开发流程是什么 2、软件项目的管理流程 3、软件开发的基本流程包括哪些 4、软件开发过程一般有几个阶段 5、软件项目管理流程是什么?...

如何在电脑上找到所有的软件(怎么找到电脑所有软件)

如何在电脑上找到所有的软件(怎么找到电脑所有软件)

今天给各位分享如何在电脑上找到所有的软件的知识,其中也会对怎么找到电脑所有软件进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、如何查看电脑上安装的所有软件 2、怎么查找电脑中的软件? 3、怎么查找电脑里面所有的软件 如何查看电脑上安装的所有软件 一...

酷信源码下载(酷信下载安装)

酷信源码下载(酷信下载安装)

今天给各位分享酷信源码下载的知识,其中也会对酷信下载安装进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、酷信通怎样恢复出厂设置 2、酷信即时通讯软件有什么特点? 酷信通怎样恢复出厂设置 1、先行备手机内的数据 (短信、联系人、下载的应用程序等),然后请...

精灵宝可梦所有精灵的图片图鉴(精灵宝可梦精灵图鉴图片大全)

精灵宝可梦所有精灵的图片图鉴(精灵宝可梦精灵图鉴图片大全)

今天给各位分享精灵宝可梦所有精灵的图片图鉴的知识,其中也会对精灵宝可梦精灵图鉴图片大全进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、谁能告诉我神奇宝贝精灵大全图鉴,带图片、带这个精灵的简介、身高、体重及属性,谢谢了 2、宠物小精灵图鉴大全 3、宠物...

iQOO手机怎么查看安卓id(iqoo手机里怎么查看手机配置)

iQOO手机怎么查看安卓id(iqoo手机里怎么查看手机配置)

本篇文章给大家谈谈iQOO手机怎么查看安卓id,以及iqoo手机里怎么查看手机配置对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、iQOO怎么打开手机识别码或者IMEI权限 2、设备ID怎么查看? 3、怎么看iqoo手机版本国行其他版本 4、iqooneo3序...

c反应蛋白高说明什么(c反应蛋白高说明什么新冠感染后)

c反应蛋白高说明什么(c反应蛋白高说明什么新冠感染后)

本篇文章给大家谈谈c反应蛋白高说明什么,以及c反应蛋白高说明什么新冠感染后对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、c反应蛋白高说明什么 2、c反应蛋白偏高说明什么 3、c-反应蛋白高是怎么回事 4、超敏c反应蛋白偏高说明什么 c反应蛋白高说明什么 C...