首页 web前端 Vue.js 怎么在idea创建vuejs项目

怎么在idea创建vuejs项目

Sep 08, 2021 am 11:52 AM
idea vue.js 创建项目

创建方法:1、安装Node;2、打开idea,点击“Create New Project”-“Static Web”,填写项目名,点击“Finis”;3、打开idea的Terminal,执行指令来安装vue脚手架工具、初始化vue项目即可。

怎么在idea创建vuejs项目

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

一、Vue.js需要Node.js的基础

1、下载地址:https://nodejs.org/en/download/
(按照正常的安装步骤,下一步下一步就可以~)

2、打开cmd(win+R)输入如下命令查看是否安装成功:

node -v
 npm -v
登录后复制

在这里插入图片描述

二、开始搭建项目

1、打开Idea新建项目

Create New Project > Static Web>填写project name和选择保存的工作空间>Finis

在这里插入图片描述

在这里插入图片描述

2、安装vue脚手架工具

·打开idea 的Terminal

在这里插入图片描述

此时先要修改一下Terminal的路径改成本机的cmd路径==>File->Settings(改完重启)(否则会出现npm,vue不是内部命令的错):

在这里插入图片描述

改完之后,就运行以下命令

//安装淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org
登录后复制

·等待下载完成以后,继续安装vue的脚手架工具,在Terminal内继续输入以下命令

npm i -g vue-cli
登录后复制

测试是否安装成功:

vue -V
登录后复制

脚手架安装完成后,初始化包结构,继续输入

vue init webpack demo
登录后复制

demo为你前面新建的项目名。初始化会进行设置。可参考此处设置。

在这里插入图片描述
初始化完成后。依次在Terminal输入:

cd demo
npm install (or if using yarn :yarn)
npm run dev
登录后复制

完成后,会提示在哪个端口可以访问,此处现在是8080

在这里插入图片描述
打开浏览器输入:localhost:8080,出现以下画面,简单的demo就搭建完成了 。

在这里插入图片描述

相关推荐:《vue.js教程

以上是怎么在idea创建vuejs项目的详细内容。更多信息请关注PHP中文网其他相关文章!

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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1669
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1273
29
C# 教程
1256
24
idea社区版和专业版的区别 idea社区版和专业版的区别 Nov 07, 2023 pm 05:23 PM

idea社区版和专业版的区别在授权方式、功能、支持与更新、插件支持、云服务与团队协作、移动开发支持、教育与学习、集成与扩展性、错误处理与调试、安全性与隐私保护等方面。详细介绍:1、授权方式,社区版是免费的,适用于所有开发人员,无论使用什么操作系统,社区版支持开源项目和商业项目,专业版是付费的,适用于商业开发,专业版有30天的试用期,之后需要购买许可证才能继续使用等等。

五个IntelliJ IDEA插件,高效编写代码 五个IntelliJ IDEA插件,高效编写代码 Jul 16, 2023 am 08:03 AM

人工智能AI是当前广受认可的未来趋势和发展方向。虽然有些人担心AI可能会取代所有的工作,但实际上只会取代那些重复性高、产出低的工作。因此,我们应该学会更加聪明地工作,而不是使劲努力地工作。本文介绍5个由AI驱动的Intellij插件,这些插件可以帮助你提高生产力,减少繁琐的重复性工作,让你的工作更加高效、便捷。1GithubCopilotGithubCopilot是由OpenAI和GitHub联合开发的一款人工智能代码辅助工具。它使用了OpenAI的GPT模型来分析代码上下文,预测并生成新的代码

图文详解如何在Vue项目中集成Ace代码编辑器 图文详解如何在Vue项目中集成Ace代码编辑器 Apr 24, 2023 am 10:52 AM

Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate 等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为Cloud9 IDE的主要编辑器 ,并且是 Mozilla Skywriter (Bespin) 项目的继承者。

探讨如何在Vue3中编写单元测试 探讨如何在Vue3中编写单元测试 Apr 25, 2023 pm 07:41 PM

当今前端开发中,Vue.js 已经成为了一个非常流行的框架。随着 Vue.js 的不断发展,单元测试变得越来越重要。今天,我们将探讨如何在 Vue.js 3 中编写单元测试,并提供一些最佳实践和常见的问题及解决方案。

Idea如何启动多个SpringBoot项目 Idea如何启动多个SpringBoot项目 May 28, 2023 pm 06:46 PM

一、准备工作使用Idea构建一个helloworld的SpringBoot项目。开发环境说明:(1)SpringBoot2.7.0(2)Idea:IntelliJIDEA2022.2.2(3)OS:MacOS环境不太一样,有些操作是有些微区别的,但是整体的思路是一样的。二、启动多个SpringBoot2.1方案一:修改配置文件的端口在SpringBoot项目中,端口号可以在配置文件进行配置,所以最简单可以想到的方案是修改配置文件application.(properties/yml)的端口配置s

Idea中Springboot热部署无效怎么解决 Idea中Springboot热部署无效怎么解决 May 18, 2023 pm 06:01 PM

一、开启idea自动make功能1-EnableAutomakefromthecompilerPRESS:CTRL+SHIFT+ATYPE:makeprojectautomaticallyPRESS:EnterEnableMakeProjectautomaticallyfeature2-EnableAutomakewhentheapplicationisrunningPRESS:CTRL+SHIFT+ATYPE:RegistryFindthekeycompiler.automake.allow.

IntelliJ IDEA中如何调试Java Stream操作 IntelliJ IDEA中如何调试Java Stream操作 May 09, 2023 am 11:25 AM

Stream操作是Java8推出的一大亮点!虽然java.util.stream很强大,但依然还是有很多开发者在实际工作中很少使用,其中吐槽最多的一个原因就是不好调试,一开始确实是这样,因为stream这样的流式操作在DEBUG的时候,是一行代码,直接下一步的时候,其实一下就过去了好多操作,这样我们就很难判断到底是里面的哪一行出了问题。插件:JavaStreamDebugger如果你用的IDEA版本比较新的话,这个插件已经是自带的了,就不需要安装了。如果还没安装的话,就手工安装一下,然后继续下面

idea springBoot项目自动注入mapper为空报错如何解决 idea springBoot项目自动注入mapper为空报错如何解决 May 17, 2023 pm 06:49 PM

在SpringBoot项目中,如果使用了MyBatis作为持久层框架,使用自动注入时可能会遇到mapper报空指针异常的问题。这是因为在自动注入时,SpringBoot无法正确识别MyBatis的Mapper接口,需要进行一些额外的配置。解决这个问题的方法有两种:1.在Mapper接口上添加注解在Mapper接口上添加@Mapper注解,告诉SpringBoot这个接口是一个Mapper接口,需要进行代理。示例如下:@MapperpublicinterfaceUserMapper{//...}2

See all articles