使用IDEA创建第一个VUE项目(详细步骤)

使用IDEA创建咱们的第一个VUE项目

欢迎关注蚕豆公众号,不定时分享技术。同时欢迎加入蚕豆技术群哦,扫描公众号点击关于作者加群~~~~

在这里插入图片描述

最近在学习VUE,想着使用vscode、hbulider、webstorm这些软件学习,但听前端前辈们说要很多插件什么的等等等!听完咱还是选择IDEA吧,毕竟和IDEA还是很亲近的!

废话不多说~~开始进入正题

1.安装环境–让VUE‘顺产’

(1)安装node.js 至于为什么安装大家可以看看前辈们的博客哦!
下载地址是 :https://nodejs.org/zh-cn/download/
安装成功后呢打开cmd命令~~我们输入node -v,和 npm -v 则会出现如下图显示版本号,代表成功!!

在这里插入图片描述

在这里插入图片描述

(2) 安装cnpm(我使用的是咱国内镜像)
npm install -g cnpm –registry=http://registry.npm.taobao.org
打开cmd复制命令然后咱们耐心等待~~~~~~(数羊开始)

在这里插入图片描述

安装成功后会出现~~如下图所示(本人已安装了镜像,所以我的第一次不能给你们了,如下图是我网上找的好尴尬呦!!

在这里插入图片描述

(3)安装vue-cli脚手架构建工具
(1)npm install -g vue-cli 或者(2)npm install --global vue-cli
安装成功呢 我们可以在 cmd 中 输入命令 vue -V 后面这个-V 那个V是 大写V 大写V 大写V VVVVVVVVVVVVVVV~~~~~~~~~~~~~记好了可别弟弟我没说!!!成功后如下图-

在这里插入图片描述

到这,哥哥们,咱们已经完成了三分之一了,我们的动作再轻点,再快点,在准一点。胜利就是属于我们的!!!!!!!

2. 让IDEA准备准备(迎接VUE小三儿

(1) 安装 VUE.JSNODE.JS
选择 File -> Settings -> Plugins ->搜索 vue.js 和 node.js 点击Installed下载,重启idea就ok了

在这里插入图片描述
在这里插入图片描述

(2) File Types: HTML 添加 *.vue类型
选择 File -> Settings -> Editor -> File Types -> HTML点Registered Patterns下的+,添加 *.vue

在这里插入图片描述

(3) 设置 JS
选择 File -> Settings -> Language & Frameworks ->JavaScript选择 ECMAScript 6 和 Prefer Strict mode

在这里插入图片描述

至此欢迎仪式结束//时间倒流,时空错乱。IDEA和VUE即将入洞房~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在这里插入图片描述

3.构建及运行vue-cli项目

(1) 首先我们创建一个Static web项目

在这里插入图片描述

(2) 我们可以使用IDEA中的Terminal中进入构建项目,具体步骤如下:
(2-1) 我们可以通过快捷键 ALT +F12 打开 Terminal 然后输入vue init webpack vue(这个vue其实是你的项目名,项目名是什么写什么) 接下来会出现一下选项:
接下来会出现几个提示,分别是输入项目名称、描述、作者等,按实际情况选择即可。
?Project name ---- 项目名称,init命令时也填了个project-name,如果无需更改,直接回车即可;
?Project description ---- 项目描述,按需填写。无需填写可以直接回车;
?Author ---- 作者
?Vue build ---- 构建模式,一般默认第一个;
?Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。
?Use ESLint to lint yout code? ---- 格式校验,按需;
?Set up unit tests ---- 测试相关,按需;
?Setup e2e tests with Nightwatch? ---- 测试相关,按需;
?Should we run ‘npm install’ for you after the project has been created? ---- 按需,这里我选Yes, use NPM。如果选No,后续自己在目标 目录下执行npm install即可。

最最最最最最最重要的时候来了 哥哥们!!!准备的准备好了,迎接也迎接了,洞房也入了。。。。。。。。。。。

(3) 最后一步(生孩子)执行命令 npm run dev

在这里插入图片描述

当我们点击上图地址的时候 如下图:

在这里插入图片描述

至此IDEA 和 VUE 的 ‘感情‘ 达到了至纯至真的地步,各位 创建vue项目告一段落,觉得新手写的不错的,给个赞哦!!!!

在这里插入图片描述

  • 73
    点赞
  • 201
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
IDEA创建Vue项目的步骤如下: 1. 首先,在命令行全局安装vue-cli工具,命令为:`npm install -g vue-cli`。这样可以确保你的电脑上有最新版本的vue-cli。 2. 打开IDEA,选择File -> New -> Project from Existing Sources。 3. 在弹出的窗口,选择你想要创建项目的文件夹,并点击"OK"。 4. 在下一个窗口,选择"Vue.js",然后点击"Next"。 5. 在"Project name"填写项目名称,如果不需要更改,可以直接按回车键。 6. 在"Project description"填写项目描述,按需填写,如果不需要可以直接按回车键。 7. 在"Author"填写作者信息,按需填写。 8. 在"Vue build"选择构建模式,默认选择第一个即可。 9. 在"Install vue-router?"选择是否安装vue-router,根据需要选择"Y"。 10. 在"Use ESLint to lint your code?"选择是否启用代码格式校验,按需选择。 11. 在"Set up unit tests"选择是否设置单元测试,按需选择。 12. 在"Setup e2e tests with Nightwatch?"选择是否设置端到端测试,按需选择。 13. 在"Should we run 'npm install' for you after the project has been created?"选择是否在项目创建后运行"npm install"命令,按需选择"Yes"。 14. 点击"Finish"创建项目。 15. 等待项目创建完成后,可以在IDEA打开项目进行开发。 希望以上步骤可以帮助你成功创建Vue项目。 [2<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [使用IDEA开发Vue项目](https://blog.csdn.net/A10714075/article/details/121191546)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值