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

相关推荐
摸鱼仙人~5 分钟前
从 Gunicorn 到 FastAPI:Python Web 生产环境架构演进与实战指南
python·fastapi·gunicorn
ヤ鬧鬧o.17 分钟前
多彩背景切换演示
前端·css·html·html5
毕设源码-朱学姐24 分钟前
【开题答辩全过程】以 基于Django框架中山社区社会补助系统为例,包含答辩的问题和答案
后端·python·django
醉舞经阁半卷书130 分钟前
Matplotlib从入门到精通
python·数据分析·matplotlib
lethelyh31 分钟前
Vue day1
前端·javascript·vue.js
历程里程碑32 分钟前
Linux 5 目录权限与粘滞位详解
linux·运维·服务器·数据结构·python·算法·tornado
酉鬼女又兒35 分钟前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海35 分钟前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
程序员哈基耄41 分钟前
安全高效,本地运行:全能文件格式转换工具
大数据·python·安全
利刃大大1 小时前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js