关于在Idea中Vue.js的项目创建准备工作

本文详细介绍了如何使用Node.js和Vue.js脚手架工具搭建一个基本的Vue项目,包括安装Node.js、配置环境、安装Vue脚手架并初始化项目的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、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和选择保存的工作空间>Finish
在这里插入图片描述
在这里插入图片描述
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就搭建完成了 。
在这里插入图片描述
此篇文章参考于简书(哈哈哈哈,感觉是照抄,但是我有自己做过的~这个仅供学习我自己做学习记录,嘻嘻)
https://www.jianshu.com/p/9c1d4f8ed068
在这里插入图片描述

### 如何在 IntelliJ IDEA创建 Vue.js 项目 #### 工具准备 为了顺利创建 Vue.js 项目,需确保已安装 Node.js 和 npm/ yarn 环境。此外,在 IntelliJ IDEA 的设置中确认已经启用 JavaScript 支持以及 Vue 插件。 #### 创建 Vue.js 项目的具体方法 通过命令行工具或 IntelliJ IDEA 自带 Terminal 执行以下操作: 1. **初始化 Vue 项目** 在目标目录下执行 `vue init webpack project-name` 并按回车键启动脚手架向导[^1]。此过程会引导用户完成一系列配置选项的选择。 2. **填写必要信息** 当提示 `Project in current directory? (Y/n)` 时输入 `y` 表示同意在此路径建立新工程[^3];随后依次处理其他字段: - 对于 `Project name` 及描述可以接受默认值或者自定义; - 需要特别注意的是 `Author` 字段,建议填入个人真实姓名以便后续管理。 3. **依赖包安装** 完成上述参数设定之后,IDEA 将自动弹窗询问是否立即运行 `npm install` 来获取所需库文件。点击确认后等待全部资源加载完毕——尽管期间可能会显示若干警告消息(WARN),但只要最终能够正常编译就没有问题。 4. **优化性能** 若发现索引更新缓慢甚至卡顿现象,则可能是由于 node_modules 文件夹内含大量子项所致[^4]。对此可采取措施忽略该特定目录从而加速整体响应速度:前往 Settings -> File Types 下新增排除列表条目 *.as ,具体参照官方文档指引调整相关参数。 ```bash # 初始化Vue CLI模板 vue init webpack my-vue-app # 或者如果使用Vue CLI 3+ vue create another-vue-project ``` 以上即为利用 IntelliJ IDEA 构建标准 Vue 应用程序的主要流程概述。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值