Rumah hujung hadapan web View.js eclipse支持vue吗

eclipse支持vue吗

Jan 06, 2021 am 11:55 AM
eclipse vue

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

eclipse支持vue吗

本教程操作环境: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
Salin selepas log masuk

可以查看安装的版本号

在这里插入图片描述
说明:安装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”
Salin selepas log masuk

在这里插入图片描述

接着设置环境变量:

修改用户变量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

在这里插入图片描述

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

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

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

Atas ialah kandungan terperinci eclipse支持vue吗. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menambah fungsi ke butang untuk vue Cara menambah fungsi ke butang untuk vue Apr 08, 2025 am 08:51 AM

Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

Cara menggunakan bootstrap di vue Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Cara Menggunakan Watch di Vue Cara Menggunakan Watch di Vue Apr 07, 2025 pm 11:36 PM

Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.

Cara merujuk fail js dengan vue.js Cara merujuk fail js dengan vue.js Apr 07, 2025 pm 11:27 PM

Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.

Apakah yang dimaksudkan dengan pembangunan Vue Multi-Page? Apakah yang dimaksudkan dengan pembangunan Vue Multi-Page? Apr 07, 2025 pm 11:57 PM

Pembangunan pelbagai halaman Vue adalah cara untuk membina aplikasi menggunakan rangka kerja VUE.JS, di mana permohonan dibahagikan kepada halaman berasingan: Penyelenggaraan kod: Memisahkan aplikasi ke dalam beberapa halaman boleh menjadikan kod lebih mudah untuk dikendalikan dan diselenggarakan. Modularity: Setiap halaman boleh digunakan sebagai modul yang berasingan untuk penggunaan semula dan penggantian mudah. Routing mudah: Navigasi antara halaman boleh diuruskan melalui konfigurasi penghalaan mudah. Pengoptimuman SEO: Setiap halaman mempunyai URL sendiri, yang membantu SEO.

Cara kembali ke halaman sebelumnya oleh Vue Cara kembali ke halaman sebelumnya oleh Vue Apr 07, 2025 pm 11:30 PM

Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.

Cara Menanyakan Versi Vue Cara Menanyakan Versi Vue Apr 07, 2025 pm 11:24 PM

Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.

Cara Lulus Parameter untuk Fungsi Vue Cara Lulus Parameter untuk Fungsi Vue Apr 08, 2025 am 07:36 AM

Terdapat dua cara utama untuk lulus parameter ke fungsi Vue.js: Lulus data menggunakan slot atau mengikat fungsi dengan mengikat, dan menyediakan parameter: lulus parameter menggunakan slot: lulus data dalam templat komponen, diakses dalam komponen dan digunakan sebagai parameter fungsi. Lulus parameter menggunakan mengikat mengikat: Fungsi mengikat dalam contoh Vue.js dan menyediakan parameter fungsi.

See all articles