eclipse支持vue吗

梦墨酱_9544

梦墨酱_9544

2021-01-06

7091人浏览

原创

eclipse支持vue,可以通过安装CodeMix插件来开发Vue;安装方法:1、选择“Help”->“Eclipse MarketPlace”;2、在搜索框输入vue,查找codeminx插件, 点击install进行安装即可。

本教程操作环境:windows10系统、Eclipse2020&&vue2.9.6版本,Dell G3电脑。

相关推荐:《vue.js教程》

eclipse支持vue,可以通过安装CodeMix插件来开发Vue。

CodeMix是Eclipse的一款插件,它解锁了VS Code和Code OSS附加扩展的各种技术,支持各种语言,具有Webclipse中您最喜欢的功能(包括带有Live Preview的Terminal +和CodeLive)。此外,CodeMix还与基于Eclipse的IDE和工具兼容(例如MyEclipse、Spring Tools Suite和JBoss Tools),可以让使用者在习惯的环境中继续工作。

步骤:

一、安装node.js和npm

1、安装

直接在官网下载就可以,选择你所需要的版本,一般window选下面的这个就可以

在这里插入图片描述
点击下载的程序,点“next”进行安装,
在这里插入图片描述
注意可以根据自己的需要修改安装路径。然后一直next,直到install。安装完成finish
在这里插入图片描述
安装完成后,目录展示:
在这里插入图片描述
可以通过命令行验证是否安装成功:键盘输入【win+R】输入:cmd,回车,输入命令:

node -v
 npm -v

可以查看安装的版本号

在这里插入图片描述
说明:安装node时,npm也已经安装上了,现在都是一起的。

2、环境变量的配置:配置环境变量的目的是防止以后npm引包会放在C盘占用c盘空间,所以我们一般将全模块路径和缓存路径放在nodejs文件夹下

新建文件夹:

node_global 全局包下载存放

node_cache node缓存
在这里插入图片描述
设置npm的路径,打开cmd输入:

npm config set prefix “D:\soft\nodejs\node_global”
npm config set cache “D:\soft\nodejs\node_cache”

在这里插入图片描述

接着设置环境变量:

修改用户变量path为:D:\soft\nodejs\node_global

在这里插入图片描述

在这里插入图片描述

修改为:

在这里插入图片描述

系统变量点击新建,NODE_PATH,变量值为:D:\soft\nodejs\node_modules

在这里插入图片描述

最后记得点击确定。

到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.
注意以下如果安装过程中出现错误可以多试试几遍命令,也可以关掉命令窗口重新打开,还有个大坑就是网上不行,需要更换4g再试试。这些都是我个人亲身经历过的问题。

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ,然后等待,没报错表示安装成功

在这里插入图片描述

cnpm install -g vue-cli–安装vue

在这里插入图片描述

通过vue -V(大写)-查看版本-是否安装成功

在这里插入图片描述

cnpm install webpack -g-安装webpack

Element Plus UI Vue3
Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用,使用 Element Plus 组件(如 el-button、el-input、el-form、el-table 等)。

下载

在这里插入图片描述

webpack -v -测试是否安装成功。然后输入yes —之后自动下载资源。

在这里插入图片描述

测试一个小项目:

在安装的nodejs文件夹下新建文件夹:nodeTest

cmd窗口切换到该文件夹下,运行命令:vue init webpack firstApp–初始化一个完整的项目

根据提示输入项目信息,具体含义可以自己搜索。。

在这里插入图片描述

创建成功!

在这里插入图片描述

cd firstApp -进入项目中

执行cnpm install—安装依赖

最后执行npm run dev 启动项目!

在这里插入图片描述

二、安装vue插件

兼容eclipse-版本2020

首先准备工作:

随便在你的workspace中找两个文件:.classpath和.project,copy到刚刚建成功的项目firstApp下面,
在这里插入图片描述
并将.project文件打开修改文件内容name改为项目名firstApp

在这里插入图片描述

打开eclipse,File-import-选下面的这个

在这里插入图片描述点next,然后选择建立的项目firstApp,打勾

在这里插入图片描述

最后finish

下一步是在eclipse中安装vue插件

Help-Eclipse Marketplace…搜索vue选择安装即可(由于网速问题有可能安装失败,多试试)

在这里插入图片描述

安装完成之后,重启就ok了!

最后就是测试一下了

浏览器输入上面命令窗口输入的命令:npm run dev之后返回的网址:http://localhost:8080

在这里插入图片描述
在这里插入图片描述
然后就可以进行编码了。。。

更多编程相关知识,请访问:编程教学!!

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

eclipse vue

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
spring框架介绍
spring框架介绍

本专题整合了spring框架相关内容,想了解更多详细内容,请阅读专题下面的文章。

2025.08.06

2791

22

Java Spring Security 与认证授权
Java Spring Security 与认证授权

本专题系统讲解 Java Spring Security 框架在认证与授权中的应用,涵盖用户身份验证、权限控制、JWT与OAuth2实现、跨站请求伪造(CSRF)防护、会话管理与安全漏洞防范。通过实际项目案例,帮助学习者掌握如何 使用 Spring Security 实现高安全性认证与授权机制,提升 Web 应用的安全性与用户数据保护。

2026.01.26

497

25

node.js调试
node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍:1、console.log()输出调试信息,通过在代码中插入console.log()语句,开发人员可以在控制台输出变量的值、函数的执行结果等信息,以便观察代码的执行流程和状态;2、断点调试,可以在代码中设置断点,以便在特定位置暂停代码的执行,观察变量的值和执行流程等。

2023.09.19

11749

8

JavaScript 全栈开发基础(Node.js + 前端)
JavaScript 全栈开发基础(Node.js + 前端)

本专题系统介绍 JavaScript 在全栈开发中的核心知识结构,涵盖 Node.js 基础、Express/Koa 接口构建、前端交互设计、模块化与包管理、数据库连接、前后端数据通信与部署流程。通过完整项目示例,帮助学习者掌握从浏览器到服务器的一体化开发能力,实现真正意义上的全栈入门。

2025.11.26

454

14

Node.js后端开发与Express框架实践
Node.js后端开发与Express框架实践

本专题针对初中级 Node.js 开发者,系统讲解如何使用 Express 框架搭建高性能后端服务。内容包括路由设计、中间件开发、数据库集成、API 安全与异常处理,以及 RESTful API 的设计与优化。通过实际项目演示,帮助开发者快速掌握 Node.js 后端开发流程。

2026.02.10

781

17

JavaScript Node.js流处理与高效数据管道构建实践
JavaScript Node.js流处理与高效数据管道构建实践

本专题聚焦 Node.js 在大规模数据处理场景中的应用,系统讲解 Stream 流机制、背压控制、管道(Pipe)处理以及文件与网络数据流的高效传输方式。内容包括可读流、可写流、双工流与转换流的实现原理,并结合实际案例构建高性能数据处理管道,帮助开发者提升数据处理效率与系统吞吐能力。

2026.04.07

344

13

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

2026.06.16

698

8

eclipse教程
eclipse教程

php中文网为大家带来eclipse教程合集,eclipse是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。php中文网还为大家带来eclipse的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

690

5

eclipse怎么设置中文
eclipse怎么设置中文

eclipse设置中文的方法:除了设置界面为中文外,你还可以为Eclipse添加中文插件,以便更好地支持中文编程。例如,你可以安装EBNF插件来支持中文变量名,或安装Chinese Helper来提供中文帮助文档。本专题为大家提供eclipse设置中文相关的各种文章、以及下载和课程。

2023.07.24

5926

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Eclipse 教程
Eclipse 教程

共35课时 | 47.3万人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.4万人学习