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

相关推荐
烛阴1 分钟前
不只是Public与Private:C#访问修饰符全方位解读
前端·c#
涔溪5 分钟前
Vue3常用的组合式API 超详细讲解
前端·javascript·vue.js
秋邱6 分钟前
AR + 离线 AI 实战:YOLOv9+TensorFlow Lite 实现移动端垃圾分类识别
开发语言·前端·数据库·人工智能·python·html
蜡笔小嘟6 分钟前
使用gemini 3 pro实现可视化大屏
前端·ai·gemini·gemini3peo
程序员杰哥9 分钟前
UI自动化测试框架:PO 模式+数据驱动
自动化测试·软件测试·python·selenium·测试工具·ui·测试用例
马玉霞11 分钟前
vue3很丝滑的table表格向上滚动效果,多用于统计页面
前端·vue.js
用户9520816117912 分钟前
百度地图JSAPI THREE Label 组件使用指南,轻松实现地图标签渲染
前端
SVIP1115916 分钟前
webpack入门 精细版
前端·webpack·node.js
畅畅畅哥哥17 分钟前
Next.js App Router 实战避坑:状态、缓存与测试
前端·前端框架
一水鉴天18 分钟前
整体设计 定稿 之20 拼语言表述体系之3 dashboard.html完整代码
java·前端·javascript