【Web 前端开发】vue3开发环境部署

1、安装 Node.js 和 npm

访问 Node.js 官网 下载并安装最新的 LTS 版本。

安装完成后,打开命令行工具,

输入 node -v 和 npm -v 检查安装是否成功。

bash 复制代码
 node -v
 npm -v 

如下图:

2、安装 Vue CLI

在命令行工具中输入以下命令安装 Vue CLI:

bash 复制代码
npm install -g @vue/cli

安装完成后,输入 vue --version 检查 Vue CLI 是否安装成功。

bash 复制代码
vue --version 

如果出现异常,vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。

打开管理员终端,输入以下指令(签名或运行这些脚本)

bash 复制代码
set-ExecutionPolicy RemoteSigned 

再次输入指令,vue --version

3、创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目:

在自己的指定文件夹中打开终端

bash 复制代码
vue create my-project

选择 Vue 3 版本,并根据提示完成项目配置。

安装完成后如下图

4、启动开发服务器

进入项目目录:

bash 复制代码
cd my-project

启动开发服务器:

bash 复制代码
npm run serve

打开浏览器,访问 http://localhost:8080 查看项目运行情况。

如下图:

5、安装 VS Code(可选)

下载并安装 Visual Studio Code 作为代码编辑器。

安装 Vue.js 插件以获得更好的开发体验。

相关推荐
harrain几秒前
html里引入使用svg的方法
前端·svg
2501_941800882 分钟前
从微服务限流到系统稳定性的互联网工程语法实践与多语言探索
开发语言·python
GalenZhang8882 分钟前
使用 Python SDK 将数据写入飞书多维表格
数据库·python·飞书·多维表格
清水白石00810 分钟前
《深度剖析 Pandas GroupBy:底层实现机制与性能瓶颈全景解析》
开发语言·python·numpy
reasonsummer12 分钟前
【办公类-125-01】20260106期末资料多个docx合并成一个PDF打印(单数页+1空白页,双数页不变)
python·pdf
遗憾随她而去.13 分钟前
Webpack5 基础篇(二)
前端·webpack·node.js
hui函数14 分钟前
python全栈入门到实战【基础篇 03】入门实操:第一个Python程序 + PyCharm使用 + 输入输出全解析
开发语言·python·pycharm
Mintopia15 分钟前
🧭 一、全栈能力的重心正在从“实现” → “指令 + 验证”转移
前端·人工智能·全栈
极客小云23 分钟前
【Python pip换源教程:国内镜像源配置方法(清华/阿里云/中科大源)】
开发语言·python·pip
Mintopia23 分钟前
2025,我的「Vibe Coding」时刻
前端·人工智能·aigc