安装vue的教程——Windows Node.js Vue项目搭建

环境准备阶段

• 操作系统：Windows 11

• Node.js环境：

  • 已安装 Node.js v22.16.0

  • 确认安装路径：D:\node-v22.16.0-x64.msi

• 工作目录：

  • 创建项目目录：D:\vue（空目录）

  • 最终项目位置：D:\vue\diancan-hn-app

---

一、安装node.js,并在管理员终端检查版本

可以直接前往飞书下载我的，点击安装就好

Docs

二、创建vue的存储目录，并在终端进入

我是在D盘创建了vue文件夹

三、使用命令全局安装 Vue CLI

npm install -g @vue/cli

查看版本

• 安装过程中出现多个弃用警告（主要涉及旧版依赖包）

• 成功安装 Vue CLI v5.0.8

• 建议后续操作：升级 npm 到 v11.4.1（提示信息）

四、创建 Vue 2 项目

vue create diancan-hn-app

五、启动开发服务器

cd diancan-hn-app
npm run serve

六、浏览器访问查看默认页面，上面图片有

http://localhost:8080/

http://172.20.80.179:8080/

七、项目存放目录介绍

可以点击进入该目录查看或者创建项目所需文件

八、使用vscode编辑工具，进行vue的程序编写

如果安装了vscode，点击打开vue文件会自动跳到vscode的编辑页面，例如点击App.vue：

若未安装vscode可以去电脑自带的软件商店下载，或者通过下面的飞书链接下载

Docs

补充

1. 按需修改项目：

   # 安装 Vue 路由
   npm install vue-router@3 # Vue 2 需用 v3 版本
   
   # 安装状态管理
   npm install vuex@3

2. 开发完成后构建生产版本：

   npm run build
   # 生成 dist/ 目录部署到服务器

提示：按 Ctrl+C 可停止开发服务器。