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

相关推荐
帅帅哥的兜兜2 分钟前
猪齿鱼 table表单编辑
前端
白兰地空瓶3 分钟前
你以为树只是画图?不——它是算法面试的“隐形主角”
前端·javascript·算法
张拭心20 分钟前
为什么说 AI 视频模型不能用来做教育?Sora-2 Veo-3 来了也不行
前端·人工智能
BoBoZz1921 分钟前
Glyph2D 同一个图形根据点云的输入产生不同位置的输出
python·vtk·图形渲染·图形处理
一笑code24 分钟前
pycharm vs vscode安装python的插件
vscode·python·pycharm
liwulin050636 分钟前
【PYTHON-YOLOV8N】yoloface+pytorch+cnn进行面部表情识别
python·yolo·cnn
lvchaoq1 小时前
页面停留时间过长导致token过期问题
前端
(●—●)橘子……1 小时前
记力扣1471.数组中的k个最强值 练习理解
数据结构·python·学习·算法·leetcode
_OP_CHEN1 小时前
用极狐 CodeRider-Kilo 开发俄罗斯方块:AI 辅助编程的沉浸式体验
人工智能·vscode·python·ai编程·ai编程插件·coderider-kilo
elangyipi1231 小时前
深入理解前端项目中的 package.json 和 package-lock.json
前端·json