idea搭建vue(使用VUE打开一个项目)

使用IDEA创建咱们的第一个VUE项目最近在学习VUE,想着使用vscode、hbulider、webstorm这些软件学习,但听前端前辈们说要很多插件什么的等等等!听完咱还是选择IDEA吧,毕竟和IDEA还是很亲近的!1.安装环境–让VUE‘顺产’(1)安装node.js至于为什么安装大家可以看看前辈们的博客哦!1.先让IDAE准备准备(迎接VUE)~~~提示:这里可以添加要学的内容例如:1、搭建Java开发环境2、掌握Java基本语法3、掌握条件语句4、掌握循环

大家好,又见面了,我是你们的朋友全栈君。

使用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项目告一段落,觉得新手写的不错的,给个赞哦!!!!

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/129724.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 在idea中创建web项目_idea部署web项目

    在idea中创建web项目_idea部署web项目前言:很高兴能够用自己所学知识为你提供答疑!!!今天我就来操作下如何使用idea这款软件创建web项目。步骤:1.创建项目首先新建一个项目然后选择最后一个,创建一个空白的Java项目,点击Next。这个时候给项目命名,我在这里命名为java_web,下面那个可以更改项目存放的路径,我这里放到自定的路径,点击Finish。刚进来的时候,idea会提醒你是否新建一个模块,先点击×,一会我们再创建模块。2.配置jdk这个时候,我们先来配置jdk的路径,以及tomcat的路径,方便之后

  • Idea中建多层级包时出现的问题

    Idea中建多层级包时出现的问题刚开始使用idea时发现不会分包。假如我想在com下面分别建Dao、pojo、service包等,会出现每次在上一个包里面建包,并不会使Dao、pojo、service包平级。解决方法:方法一:            1)先在java包下建名为com包,     2)鼠标点击com的上一级包(这里就是java包),然后新建包为com.Dao包。这里会出现不用着急,因为你只有一个包。再继续点击com…

  • idea永2021.2激活码破解方法

    idea永2021.2激活码破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • goland2021.4激活码_通用破解码

    goland2021.4激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • pycharm激活码2021.12.12_最新在线免费激活

    (pycharm激活码2021.12.12)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • idea git 合并分支到指定分支_idea合并分支到另一个分支

    idea git 合并分支到指定分支_idea合并分支到另一个分支ideagit的使用(四)git建立分支与合并分支作者:马育民 • 2017-11-1017:05 • 阅读:103571.为什么要建立分支git默认的主分支名字为master,一般团队开发时,都不会在master主分支上修改代码,而是建立新分支,测试完毕后,在将分支的代码合并到master主分支上。2.操作如下:2.1ideagit分支的操作ideagit的操作在右下角,如下图:说明…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号