【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 插件以获得更好的开发体验。

相关推荐
好家伙VCC25 分钟前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务1 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
嘿起屁儿整1 小时前
面试点(网络层面)
前端·网络
VT.馒头1 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
前端玖耀里1 小时前
如何使用python的boto库和SES发送电子邮件?
python
serve the people1 小时前
python环境搭建 (十二) pydantic和pydantic-settings类型验证与解析
java·网络·python
小天源1 小时前
Error 1053 Error 1067 服务“启动后立即停止” Java / Python 程序无法后台运行 windows nssm注册器下载与报错处理
开发语言·windows·python·nssm·error 1053·error 1067
喵手2 小时前
Python爬虫实战:HTTP缓存系统深度实战 — ETag、Last-Modified与requests-cache完全指南(附SQLite持久化存储)!
爬虫·python·爬虫实战·http缓存·etag·零基础python爬虫教学·requests-cache
喵手2 小时前
Python爬虫实战:容器化与定时调度实战 - Docker + Cron + 日志轮转 + 失败重试完整方案(附CSV导出 + SQLite持久化存储)!
爬虫·python·爬虫实战·容器化·零基础python爬虫教学·csv导出·定时调度
phltxy2 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js