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

相关推荐
song150265372981 分钟前
空间站太阳能帆板电池 组件性能测试 AM0太阳光模拟器
开发语言·python
小二·4 分钟前
Vue 前端性能优化终极指南:Lighthouse 100 分实战(Vue 3 + Vite)
前端·vue.js·性能优化
LYFlied7 分钟前
深入解析服务端渲染(SSR):从原理到实践
前端·性能优化
用户904706683577 分钟前
到底是用nuxt的public还是assets?一篇文章开悟
前端
星火开发设计8 分钟前
Python数列表完全指南:从基础到实战
开发语言·python·学习·list·编程·知识·期末考试
星浩AI13 分钟前
LCEL:打造可观测、可扩展、可部署的 LangChain 应用
人工智能·后端·python
这儿有一堆花17 分钟前
Python 虚拟环境的配置与管理指南
开发语言·python
23级二本计科21 分钟前
前端 HTML + CSS + JavaScript
前端·css·html
踩着两条虫22 分钟前
VTJ.PRO「AI + 低代码」应用开发平台的后端模块系统
前端·人工智能·低代码
Generalzy22 分钟前
深度觉醒 — Deep Agents(三座大山 — Agent 的核心挑战)
python