怎么在idea创建vuejs项目

创建方法: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 demonpm install (or if using yarn :yarn)npm run dev

登录后复制

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

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

在这里插入图片描述

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

以上就是怎么在idea创建vuejs项目的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3019831.html

(0)
上一篇 2025年3月13日 05:31:11
下一篇 2025年3月4日 20:28:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vuejs怎么实现全局状态管理

    在vuejs中可以利用vuex实现全局状态管理;Vuex是一个专为Vue.js应用程序开发的状态管理模式,可以用来管理全局数据,可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。 本教程操作环境:windows7系统…

    2025年3月13日
    200
  • vuejs有哪些使用场景

    vuejs的使用场景:1、单页面应用程序;2、移动端开发,可以结合i-view、Element UI等一些成熟的前端UI库一起开发;3、维护较少,组件复用要求不高的项目;4、具有复杂交互逻辑的前端应用等。 本教程操作环境:windows7系…

    2025年3月13日
    200
  • vuejs算什么

    vuejs是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用;Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 本文操作环境:Windows7系统、vue2.5.17…

    2025年3月13日
    200
  • 怎么下载vuejs框架

    下载vuejs框架的方法:1、打开vuejs官网;2、在打开的网页上,找到并点击“GITHUB”按钮;3、根据需求选择下载脚本的版本;4、下载VEU脚本框架即可。 本文操作环境:windows7系统、Vue2.9.6版,DELL G3电脑。…

    2025年3月13日 编程技术
    200
  • vuejs怎么删除cookie

    vuejs删除cookie的方法:1、通过getCookie读取cookie;2、通过setCookie设置cookie;3、通过“delCookie (name) {…}”删除cookie即可。 本文操作环境:windows7…

    2025年3月13日
    200
  • vue路由传值的几种方式是什么

    vue路由传值的方式:1、利用“router-link”路由导航来传递;2、调用“$router.push”实现路由传参数值;3、通过路由属性中的name匹配路由,再根据params传递参数值;4、通过query来传递参数值。 本教程操作环…

    2025年3月13日
    200
  • vuejs开发如何启动项目

    vuejs启动项目的方法:1、安装node.js;2、安装“@vue/cli”;3、使用“vue create 项目名称”命令创建一个项目;4、使用cd命令进入vue项目目录中;5、执行“npm run serve”命令启动项目。 本教程操…

    2025年3月13日 编程技术
    200
  • 手把手教你使用Vue2代码改成Vue3(图文详解)

    之前的文章《一招教你使用vscode中插件搞定整个项目的代码替换(收藏)》中,给大家介绍了怎么使用vscode中插件搞定整个项目的代码替换。下面本篇文章给大家介绍怎么使用Vue2代码改成Vue3,伙伴们过来看看吧。 Vue3已经出来有一段时…

    2025年3月13日 编程技术
    200
  • vuejs怎么取消冒泡

    vuejs取消冒泡的方法:1、打开相应的vue文件;2、通过“…”方式取消事件冒泡。 本文操作环境:windows7系统、vue2.5.17版、DELL G3电脑。 vuejs怎么取消冒泡? vue.js阻止事件冒泡和默认事件 …

    2025年3月13日
    200
  • vuejs query 传参失败怎么办

    vuejs query传参失败的解决办法:1、打开相应的代码文件;2、查看需要传的数据类型;3、将数据转换为json格式传过去即可。 本文操作环境:windows7系统、vue2.5.17版、DELL G3电脑。 vuejs query 传…

    2025年3月13日
    200

发表回复

登录后才能评论