当前位置：首页 > article >正文

Vue环境搭建：vue＋idea

article 2026/1/29 18:49:37

第一章、Vue环境搭建：安装node
- 2.1）node的下载
- 2.2）配置node的环境变量
- 2.3）常见的npm命令
第二章、使用idea创建vue工程
- 2.1）在IDEA中设置国内镜像
- 2.2）在IDEA中进行脚手架安装
- 2.3）在IDEA中创建vue工程并启动
- 2.4）进入工程目录，启动服务
第三章、vue工程的目录结构介绍
- 3.1）vue工程的目录结构
- 3.2）package.json核心文件内容
第4章、借助CDN使用Vue
- 4.1）vue简单引入：引入js文件
- 4.2）下载Vue插件和开发者工具
- 4.3）简单的Vue程序

友情提醒:

先看目录，了解文章结构，点击目录可跳转到文章指定位置。

第一章、Vue环境搭建：安装node

2.1）node的下载

官网下载地址点击跳转
①点击下载安装，再点击全部安装包
在这里插入图片描述

②选择上级目录
在这里插入图片描述

③找到v16.18.0版本
在这里插入图片描述
④选择windows免安装版本下载，直接解压可用，注意解压的路径不能有中文

2.2）配置node的环境变量

①复制解压的路径
在这里插入图片描述
②win+E打开管理器–>此电脑–>属性

③选择高级系统设置

④选择环境变量

⑤点击path并编辑

⑥点击新建，输入刚刚解压的路径： F:\node-v16.18.0

⑦cmd窗口输入node -v测试，出现如下页面表示安装成功
在这里插入图片描述

2.3）常见的npm命令

安装好node后，就可以使用npm的命令了
注意： -g是全局安装

//安装脚手架
npm install -g @vue/cli //卸载vue脚手架
>:npm uninstall vue-cli -g//强制清除npm缓存：
npm cache clean --force//再执行安装npm：
npm install -g npm//npm安装插件
npm install 组件名 -g//npm卸载插件
npm uninstall 组件名 -g//npm查看插件
npm list//设置国内镜像
npm config set registry https://registry.npm.taobao.org//查看镜像是否切换成功：
npm config get registry
```# 第三章、使用vscode写vue## 3.1）在vscode终端中设置国内镜像
在VSCode中按 Ctrl+`（反引号键）
或通过菜单：查看 > 终端,打开VSCode内置终端，输入命令设置国内淘宝镜像```sql
npm config set registry https://registry.npmmirror.com

查看镜像

npm config get registry

在这里插入图片描述

第二章、使用idea创建vue工程

2.1）在IDEA中设置国内镜像

①打开IDEA，File—》settings
在这里插入图片描述 ②tools—>terminal—>修改shellpath—>重启IDEA

③配置后就可以在IDEA中使用命令行了

④设置国内镜像，地址更新为下面的地址了

npm config set registry https://registry.npmmirror.com

查看镜像

npm config get registry

在这里插入图片描述

2.2）在IDEA中进行脚手架安装

①安装命令，如果安装失败，卸载重装

//安装脚手架
npm install -g @vue/cli//卸载vue脚手架
npm uninstall vue-cli -g

在这里插入图片描述

②出现如下提示为成功
在这里插入图片描述

2.3）在IDEA中创建vue工程并启动

①在terminal输入创建命令

vue create 项目名（名称不能有中文，必须全小写，可用下划线）

在这里插入图片描述

②按上下箭头，回车，选择vue3语法模板
在这里插入图片描述
③创建成功后提示successful

2.4）进入工程目录，启动服务

cd demo
npm run serve

第三章、vue工程的目录结构介绍

3.1）vue工程的目录结构

my-vue-app/
├── node_modules/        # 项目依赖的 npm 包
├── public/              # 静态资源目录
│   └── index.html       # HTML 入口文件
├── src/                 # 源代码目录
│   ├── assets/          # 静态资源 (例如图片、字体)
│   ├── components/      # Vue 组件
│   ├── App.vue          # 根组件
│   ├── main.js          # 入口文件
│   └── router/          # 路由配置 (如果使用了 Vue Router)
│   └── store/           # Vuex 状态管理 (如果使用了 Vuex)
├── .gitignore           # Git 忽略文件
├── babel.config.js      # Babel 配置
├── package.json         # 项目依赖和脚本
├── vue.config.js        # Vue CLI 配置 (如果使用了 Vue CLI)
└── vite.config.js       # Vite 配置 (如果使用了 Vite)

截图参照
在这里插入图片描述

3.2）package.json核心文件内容

在这里插入图片描述

第4章、借助CDN使用Vue

4.1）vue简单引入：引入js文件

①官网下载Vue.js文件：Vue官网：快速上手
在这里插入图片描述
将vue.js文件复制到IDEA

②改变IDEA对js语法的识别：如图改为ECMAScript6
在这里插入图片描述

4.2）下载Vue插件和开发者工具

在IDEA下载Vue插件，安装插件方便识别vue提升
在这里插入图片描述
④在浏览器下载安装开发者工具
Chrome浏览器安装Vue.js devtools插件
1、浏览器访问极简插件

在这里插入图片描述

2、右上角搜索框搜索vue DevTools插件
在这里插入图片描述

3、在本地解压刚刚下载的插件，解压后如图：
在这里插入图片描述
4、打开谷歌浏览器–更多工具–拓展程序
注意：打开开发者模式

5、将解压的文件拖入拓展程序页面安装，安装成功
在这里插入图片描述

4.3）简单的Vue程序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="root"><!--{{}}：插值语法  是以文本内容的形式给某个dom元素提供叶子节点--><h1>{{name}}--{{age}}--{{sex}} --{{1+1}}</h1><p>{{love}}</p><hr/>User对象:<p>{{user.uname}}--{{user.uage}}</p>users数组：<p>{{users[0].uname}}</p><p>{{users[1].uname}}</p><p>{{users[2].uname}}</p></div>
</body>
<!--vue对象一般写在body体下面--><script>//这样写当前vue对象只能作用在当前的html上new Vue({el:"#root",//vue要把数据渲染到哪个html容器上data:{//vue的数据  只要符合键值对都行name:"大朗",age:18,//js值sex:true,love:"<h2>看书</h2>",//以文本显示user:{"uname":"西门","uage":20},//  js对象  对象类型的参数users:[{"uname":"金莲","uage":20},{"uname":"王婆","uage":60},{"uname":"武松","uage":16}]},methods:{//vue提供的函数}});</script>
</html>

运行后页面如下
在这里插入图片描述

目录

第一章、Vue环境搭建：安装node

2.1）node的下载

2.2）配置node的环境变量

2.3）常见的npm命令

第二章、使用idea创建vue工程

2.1）在IDEA中设置国内镜像

2.2）在IDEA中进行脚手架安装

2.3）在IDEA中创建vue工程并启动

2.4）进入工程目录，启动服务

第三章、vue工程的目录结构介绍

3.1）vue工程的目录结构

3.2）package.json核心文件内容

第4章、借助CDN使用Vue

4.1）vue简单引入：引入js文件

4.2）下载Vue插件和开发者工具

4.3）简单的Vue程序

相关文章：